Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m287:learningunits:lu04:aufgaben:grid [2025/03/28 07:42] – kdemirci
+++ modul:m287:learningunits:lu04:aufgaben:grid [2025/03/28 08:22] (aktuell) – kdemirci
@@ Zeile 1: / Zeile 1: @@
-====== LU04.A02 - Grid ======
+====== LU04.A03 - Grid ======
 ===== Aufgabe 1: Theorie ======
+==== Aufgabenstellung ====
   - Was bewirkt die CSS-Eigenschaft ''display: grid''?
   - Was ist der Unterschied zwischen einem Grid-Container und einem Grid-Item?
@@ Zeile 14: / Zeile 15: @@
 ==== Ausgangslage ====
+**HTML**
 <code html>
 <!-- HTML -->
@@ Zeile 26: / Zeile 28: @@
 </code>
+==== Aufgabenstellung ====
+  - Setzen Sie ''display: grid'' auf ''.grid''
+  - Erstelle 3 Spalten und 2 Zeilen
+  - Geben Sie jeder Box eine andere Hintergrundfarbe
+===== Aufgaben 3: Verhalten eines Grids mit verschiedenen Spalten =====
+==== Aufgabenstellung ====
+  - Erstellen Sie ein Grid mit 3 Spalten: Die erste mit ''200px'', die zweite mit ''1fr'', die dritte mit ''2fr''
+  - Fügen Sie drei Grid-Items ein
+  - Beobachten Sie, wie sich die Spaltenbreiten verändern, wenn Sie die Fenstergrösse anpassen
+===== Aufgabe 4: Elemente gezielt platzieren =====
+==== Aufgabenstellung ====
+  - Erstelle Sie ein 4x4-Grid
+  - Fügen Sie ein Element ein, das Spalte 2 bis 4 und Zeile 1 bis 2 einnimmt
+  - Verwenden Sie ''grid-column-start'', ''grid-column-end'', ''grid-row-start'', ''grid-row-end''
+===== Aufgabe 5: Grid Template erstellen =====
+<code>
++---------+------------+
+| header  |  header    |
++---------+------------+
+| nav     |  content   |
++---------+------------+
+| footer  |  footer    |
++---------+------------+
+</code>
+==== Aufgabenstellung ====
+  - Erstellen Sie das Layout mithilfe von ''grid-template-areas''