Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m287:learningunits:lu04:grid [2025/03/28 07:24] – kdemirci
+++ modul:m287:learningunits:lu04:grid [2025/03/28 07:30] (aktuell) – kdemirci
@@ Zeile 13: / Zeile 13: @@
 <code css>
 .grid-container {
-	display: grid;
+   display: grid;
-	grid-template-columns: 1fr 1fr 1fr;
+   grid-template-columns: 1fr 1fr 1fr;
-	grid-template-rows: 1fr 1fr;
+   grid-template-rows: 1fr 1fr;
-	width: 600px;
+   width: 600px;
-	height: 400px;
+   height: 400px;
 }
 </code>
@@ Zeile 26: / Zeile 26: @@
 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 ein 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:m287:learningunits:lu04:grid-2.svg?600 }}
 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:m287:learningunits:lu04:grid-3.svg?600 }}
@@ Zeile 37: / Zeile 54: @@
 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 Bereiche platzieren.
-{{ :modul:m287:learningunits:lu04:grid-3.svg?600 }}
+<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 ====