Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m287:learningunits:lu04:grid [2025/03/28 07:27] – 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 40: / Zeile 40: @@
 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 47: / 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 ====