Über mehrere Zellen

Die Maine Coon ist eine der größten Katzenrassen, geben wir ihr also auch eine größere Karte: zwei Spalten breit und zwei Zeilen hoch.

Ein Item kann mehr als eine Zelle belegen. Mit der Eigenschaft grid-column legen wir fest, welche Spalten es belegt, und mit grid-row, welche Zeilen. Am einfachsten geht das mit dem Wort span und einer Zahl:

.gross {
	grid-column: span 2;
}

Das Item beginnt dort, wo es sowieso stünde, ist aber zwei Spalten breit. Die Items danach rücken weiter, um Platz zu machen. Passt das Item am Ende einer Zeile nicht mehr hinein, rutscht es in die nächste.

Wir können auch genau angeben, wo ein Item beginnt und wo es endet, und zwar mit den Nummern der Grid-Linien. Die Linien sind ab 1 nummeriert: Ein Grid mit drei Spalten hat vier senkrechte Linien, vom linken bis zum rechten Rand (siehe Bild). Der Wert besteht dann aus zwei Zahlen, getrennt durch einen Schrägstrich: die Linie, an der das Item beginnt, und die Linie, an der es endet.

.gross {
	grid-column: 1 / 3;
}

Dieses Item liegt zwischen den Linien 1 und 3, es belegt also die erste und die zweite Spalte. grid-column: 1 / -1 zieht ein Item über die ganze Breite des Grids: Negative Zahlen zählen die Linien vom Ende her, -1 ist also die letzte Linie.

Die Eigenschaft grid-row funktioniert genauso, nur für Zeilen.