Grid-Bereiche

Syntax

.box1 { grid-row-start / grid-column-start / grid-row-end / grid-column-end }

Das folgende grid layout hat vier Spalten. Zwischen den Grid-Elementen ist ein Abstand definiert. Hier scheint die Hintergrundfarbe hindurch.

.box8 { grid-area: 2 / 2 / span 1 / span 2; }

Box8 beginnt in Reihe 2 und Spalte 2 und erstreckt sich über über 1 Reihe und 2 Spalten

.box7 { grid-area: 3 / 1 / span 1 / span 4; }

Box7 beginnt in Reihe 3 und Spalte 1 und erstreckt sich über über 1 Reihe und 4 Spalten

1
2
3
4
5
6
7
8