Grid Items Platziren

Bisher hat der Browser die Grid-Items automatisch im Raster angeordnet. Das ist oft praktisch. Manchmal willst du aber einzelne Items gezielt größer machen oder an eine bestimmte Stelle setzen. Dafür verwendest du Eigenschaften wie grid-column, grid-row und span.

Grid-Linien verstehen

Um Items gezielt zu platzieren, musst du Grid-Linien verstehen. Linien sind die Grenzen zwischen den Spalten und Reihen. Das ist am Anfang ungewohnt: Drei Spalten haben nicht drei Linien, sondern vier Linien.Grid-Linien sind die Grenzen zwischen Spalten oder Reihen. Deshalb hat ein Grid mit drei Spalten vier vertikale Linien.

Bei drei Spalten gibt es vier vertikale Linien:

Ein Item mit grid-column platzieren

Mit grid-column kannst du festlegen, über welche Spalten ein Item laufen soll.Das bedeutet: Das Item startet bei Linie 1 und endet bei Linie 3. Dadurch nimmt es zwei Spalten ein.

1.item {
2  grid-column: 1 / 3;
3}

Ein Item mit grid-row platzieren

grid-row funktioniert ähnlich wie grid-column, nur für Zeilen.

1.item {
2  grid-row: 1/2;
3}

Ein Item mit span vergrößern

Oft willst du gar nicht festlegen, an welcher Linie ein Item starten soll. Du möchtest nur sagen: Dieses Item soll zwei Spalten breit sein.

span 2 bedeutet: Nimm zwei Spalten ein.

1.item {
2  grid-column: span 2;
3}