Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m287:learningunits:lu04:grid [2025/03/28 07:28] – kdemirci
+++ modul:m287:learningunits:lu04:grid [2025/03/28 07:30] (aktuell) – kdemirci
@@ Zeile 47: / Zeile 47: @@
 }
 </code>
+{{ :modul:m287:learningunits:lu04:grid-3.svg?600 }}
 ===== Grid Areas =====
@@ Zeile 52: / 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 ====