Der Grid-Container ist das Element, auf dem das Raster eingeschaltet wird. Er definiert die Spuren, in die seine Kinder fallen.
- Grid-Container
Element, auf dem display mit dem Wert grid gesetzt ist und dessen unmittelbare Kinder zu Grid-Items werden.
Beispiel: „Der Grid-Container legt fest, wie viele Spuren es gibt und wie breit sie sind.“
Spuren festlegen
.raster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}Diese eine Zeile ist das meistgenutzte Muster: repeat wiederholt, auto-fit passt die Zahl der Spalten an den Platz an, und minmax gibt eine Mindestbreite, unter die keine Spalte fällt. Das Ergebnis ist ein Kartenraster, das ohne eine einzige Media Query umbricht.
Benannte Bereiche
Mit grid-template-areas lassen sich Bereiche benennen und das Layout als Zeichnung im Stylesheet notieren. Für Seitenlayouts mit Kopf, Inhalt, Seitenleiste und Fuß ist das die lesbarste Form, und das Umstellen auf schmale Bildschirme ist eine neue Zeichnung.