Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m287:learningunits:lu04:aufgaben:grid [2025/03/28 07:37] – 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 ======
-  - Was bewirkt die CSS-Eigenschaft display: grid?
+==== Aufgabenstellung ====
+  - Was bewirkt die CSS-Eigenschaft ''display: grid''?
   - Was ist der Unterschied zwischen einem Grid-Container und einem Grid-Item?
-  - Wofür stehen die Einheiten fr und px in CSS Grid?
+  - Wofür stehen die Einheiten ''fr'' und ''px'' in CSS Grid?
   - Wie viele Dimensionen unterstützt CSS Grid?
-  - Was passiert, wenn du grid-template-columns: 1fr 2fr setzt?
+  - Was passiert, wenn Sie ''grid-template-columns: 1fr 2fr'' setzen?
-  - Welche Kurzform gibt es für grid-column-start und grid-column-end?
+  - Wie sieht die Kurzform für ''grid-column-start'' und ''grid-column-end'' aus?
+===== Aufgaben 2: Einfache Box-Platzierung =====
+==== Ausgangslage ====
+**HTML**
+<code html>
+<!-- HTML -->
+<div class="grid">
+  <div>Box 1</div>
+  <div>Box 2</div>
+  <div>Box 3</div>
+  <div>Box 4</div>
+  <div>Box 5</div>
+  <div>Box 6</div>
+</div>
+</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''