Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:ffit:css:learningunits:lu01:display [2024/08/29 08:02] – angelegt kdemirci
+++ modul:ffit:css:learningunits:lu01:display [2024/08/29 09:19] (aktuell) – kdemirci
@@ Zeile 14: / Zeile 14: @@
 | **grid** (Grid-Element) | Aktiviert das Grid-Layoutmodell für das Element, mit dem Sie Inhalte in einer zweidimensionalen Rasteranordnung organisieren können. Grid ist leistungsstark für die Erstellung von Layouts mit mehreren Spalten und Zeilen und bietet präzise Kontrolle über die Positionierung von Elementen. |
-Eine komplette Liste aller verfügbaren Werte finden Sie [hier](https://www.w3schools.com/cssref/pr_class_display.php).
+Eine komplette Liste aller verfügbaren Werte finden Sie [[https://www.w3schools.com/cssref/pr_class_display.php|hier]].
 ===== CSS Flexbox =====
@@ Zeile 23: / Zeile 23: @@
 Die Grundkonzepte von Flexbox umfassen das Container-Element und die darin enthaltenen Items. Der Flex-Container fungiert als Rahmen für das Flexbox-Layout und organisiert die Flex-Items innerhalb. Diese Items können horizontal oder vertikal angeordnet werden, je nach Ausrichtung der Hauptachse. Die Hauptachse definiert die Richtung, in der die Flex-Items im Container angeordnet sind, während die Querachse senkrecht dazu steht und die Ausrichtung der Items in Bezug auf die Hauptachse beeinflusst. Das Verständnis dieser Grundkonzepte ist entscheidend für die effektive Nutzung von Flexbox zur Erstellung dynamischer und flexibler Layouts in CSS.
-{{:modul:ffit:css:learningunits:lu01:flexbox.png?400|}}
+{{:modul:ffit:css:learningunits:lu01:flexbox.png?1000|}}
 ==== Eigenschaften des Containers ====
@@ Zeile 53: / Zeile 53: @@
 Ein Beispiel mit zwei Zeilen und drei Spalten:
+|<code css>
+.grid-container {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-rows: 1fr 1fr;
+	width: 600px;
+	height: 400px;
+}
+</code>|{{ :modul:ffit:css:learningunits:lu01:grid-1.svg?500 |}}|
 ==== Platzieren von Elementen im Grid ====
 Nun können wir ein Element in diesem Raster platzieren, so wie wir es möchten. Dafür können wir mit `grid-column-start`, `grid-column-end`, `grid-row-start` und `grid-row-end` jeweils den Start und das Ende unseres Elements im Grid angeben. Wie im vorherigen Teil erwähnt, wird das Grid in Zahlen aufgeteilt. So kann man zum Beispiel in Element mittig von unserem Grid-Raster platzieren:
+|<code css>
+.grid-item {
+   grid-column-start: 2;
+   grid-column-end: 3;
+   grid-row-start: 2;
+   grid-row-end: 3;
+   background-color: blue;
+}
+</code>|{{ :modul:ffit:css:learningunits:lu01:grid-2.svg?500 |}}|
 Es gibt auch eine Kurzform von der Schreibweise für die Reihen und Spalten. Mit den Anweisungen `grid-column` und `grid-row` können Sie jeweils getrennt mit einem `/` den Start und das Ende eines Elements im Raster angeben.
+|<code css>
+.grid-item {
+   grid-column: 2/3;
+   grid-row: 1/4;
+}
+</code>|{{ :modul:ffit:css:learningunits:lu01:grid-3.svg?500 |}}|
 ==== Grid Areas ====
 Mit `grid-template-areas` haben wir die Möglichkeit, verschiedene Bereiche in unserem Grid zu definieren. Mit `grid-area` können wir dann unsere Elemente innerhalb der vorgegebenen Bereichenen platzerein.
+<code css>
+.grid-container {
+   grid-column-template: "1fr 1fr 1fr";
+   grid-template-areas: "header    header header"
+                        "thumbnail text   links "
+                        ".         text   .     ";
+}
+.article-title {
+   grid-area: header;
+}
+.article-img {
+   grid-area: thumbnail;
+}
+</code>
 ===== Ressourcen =====
   * [[https://css-tricks.com/snippets/css/a-guide-to-flexbox/|CSS-Tricks: A Complete Guide to Flexbox]]
   * [[https://www.w3schools.com/css/css3_flexbox.asp|W3S: CSS Flexbox]]