Modul 07
CSS Grid
CSS Grid
offizieller Name der Spezifikation: "CSS Grid Layout Module"
- Zweidimensional
- im Unterschied zu Flexbox arbeitet Grid gleichzeitig mit Zeilen und Spalten – nicht nur mit einer einzigen Achse.
- Raster ("Grid")
- der Container wird in ein Gitter aus Spuren aufgeteilt; jedes Element wird einer oder mehreren dieser Spuren zugewiesen, notfalls auch über mehrere hinweg.
Kurz gesagt: Grid eignet sich für ganze Seiten-Layouts, bei denen Elemente sowohl horizontal als auch vertikal genau positioniert werden müssen – z. B. ein klassisches Layout mit Header, Sidebar und Hauptbereich.
Werkstatt-Regler
Spalten & Zeilen definieren
grid-template-columns und grid-template-rows legen fest, wie viele Spuren es gibt und wie groß sie sind – z. B. gleichmäßig mit repeat(n, 1fr).
Zellen überspannen
grid-column: span n und grid-row: span n lassen eine Zelle mehrere Spuren einnehmen, statt nur eine einzelne Zelle zu füllen.
grid-auto-flow: dense
Dense sorgt dafür, dass nachfolgende Zellen entstehende Lücken auffüllen, statt Leerraum nach einer überspannenden Zelle stehen zu lassen.