LU04.A03 - Grid

1. Was bewirkt die CSS-Eigenschaft display: grid?
2. Was ist der Unterschied zwischen einem Grid-Container und einem Grid-Item?
3. Wofür stehen die Einheiten fr und px in CSS Grid?
4. Wie viele Dimensionen unterstützt CSS Grid?
5. Was passiert, wenn Sie grid-template-columns: 1fr 2fr setzen?
6. Wie sieht die Kurzform für grid-column-start und grid-column-end aus?

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>

1. Setzen Sie display: grid auf .grid
2. Erstelle 3 Spalten und 2 Zeilen
3. Geben Sie jeder Box eine andere Hintergrundfarbe

1. Erstellen Sie ein Grid mit 3 Spalten: Die erste mit 200px, die zweite mit 1fr, die dritte mit 2fr
2. Fügen Sie drei Grid-Items ein
3. Beobachten Sie, wie sich die Spaltenbreiten verändern, wenn Sie die Fenstergrösse anpassen

1. Erstelle Sie ein 4×4-Grid
2. Fügen Sie ein Element ein, das Spalte 2 bis 4 und Zeile 1 bis 2 einnimmt
3. Verwenden Sie grid-column-start, grid-column-end, grid-row-start, grid-row-end

+---------+------------+
| header  |  header    |
+---------+------------+
| nav     |  content   |
+---------+------------+
| footer  |  footer    |
+---------+------------+

1. Erstellen Sie das Layout mithilfe von grid-template-areas