Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m287:learningunits:lu04:grid [2025/03/28 07:21] – kdemirci
+++ modul:m287:learningunits:lu04:grid [2025/03/28 07:30] (aktuell) – kdemirci
@@ Zeile 11: / Zeile 11: @@
 Ein Beispiel mit zwei Zeilen und drei Spalten:
-{{ :modul:m287:learningunits:lu04:grid-1.svg |Abb-01: CSS Grid 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:m287:learningunits:lu04:grid-1.svg?600 }}
 ==== Platzieren von Elementen im Grid ====
@@ Zeile 17: / Zeile 27: @@
 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:
-{{themen/02_display/img/grid-2.svg?direct |Abb-02: CSS Grid Element im Raster}}
+<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.
-{{themen/02_display/img/grid-3.svg?direct |Abb-03: CSS Grid Element im Raster}}
+<code css>
+.grid-item {
+   grid-column: 2/3;
+   grid-row: 1/4;
+}
+</code>
+{{ :modul:m287:learningunits:lu04:grid-3.svg?600 }}
 ===== Grid Areas =====
@@ Zeile 27: / 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.
-{{themen/02_display/img/grid-3.svg?direct |Abb-04: CSS Grid Areas}}
+<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 ====