Grid-Container und Grid-Items

Bisher hast du Elemente mit Flexbox in einer Richtung angeordnet: in einer Zeile oder in einer Spalte. Viele Layouts brauchen aber beide Richtungen gleichzeitig: eine Fotogalerie, eine Reihe von Karten oder eine ganze Seite mit Kopfbereich, Menü, Inhalt und Fußbereich. Dafür hat CSS das Grid-Layout, kurz CSS Grid. Es ordnet Elemente gleichzeitig in Zeilen und Spalten an, ein bisschen wie eine Tabelle.

Für diese Lektion haben wir eine neue Version der Katzenseite vorbereitet. Sie hat einen Kopfbereich, ein Menü, eine Beschreibung und sechs Karten mit Katzenrassen. Die Karten stehen in einem div mit der Klasse karten, und jede Karte hat die Klasse karte. Vorerst stehen sie untereinander.

Ein Grid schaltest du genauso ein wie Flexbox: Wir geben dem Elternelement display: grid, und es wird zum Grid-Container. Seine direkten Kinder werden zu Grid-Items. Wirklich nur die direkten Kinder: Die Überschriften und Absätze in den Karten sind keine Grid-Items, sie bleiben in ihren Karten.

Dann legen wir mit der Eigenschaft grid-template-columns fest, welche Spalten das Grid hat. Ihr Wert ist eine Liste von Spaltenbreiten, durch Leerzeichen getrennt, und jede Breite erzeugt eine Spalte:

.karten {
	display: grid;
	grid-template-columns: 200px 100px;
}

Dieses Grid hat zwei Spalten: Die erste ist 200 Pixel breit und die zweite 100 Pixel. Die Items füllen das Grid in der Reihenfolge, in der sie im HTML stehen: von links nach rechts, und wenn eine Zeile voll ist, geht es in der nächsten weiter. Der Browser erzeugt so viele Zeilen wie nötig, und jede Zeile ist so hoch, wie ihr Inhalt es braucht. (Zeilen lassen sich auch von Hand mit der Eigenschaft grid-template-rows festlegen, aber meistens überlassen wir das dem Browser.)

Das Bild zeigt ein Grid mit drei Spalten und zwei Zeilen. Eine Stelle, an der sich eine Zeile und eine Spalte treffen, heißt Zelle, und jedes Item belegt eine Zelle. Die nummerierten Linien zwischen den Spalten und den Zeilen sind die Grid-Linien. Wir brauchen sie später in dieser Lektion.