Ein Grid-Item ist ein unmittelbares Kind eines Grid-Containers. Es lässt sich über Linien gezielt platzieren und über mehrere Spuren spannen.
- Grid-Item
Unmittelbares Kind eines Grid-Containers.
Beispiel: „Ein Grid-Item fällt von sich aus in die nächste freie Zelle.“
Spannen und platzieren
.breit { grid-column: span 2; }
.von-bis { grid-column: 1 / 3; }
.bis-ende { grid-column: 1 / -1; }Die erste Angabe spannt über zwei Spalten, die zweite setzt von Linie 1 bis Linie 3, die dritte von links bis zur letzten Linie. Die Zählung mit negativen Zahlen von hinten ist praktisch, wenn die Zahl der Spalten variabel ist.
Die Reihenfolge
Wie bei Flexbox gilt: Das Platzieren ändert nur die Darstellung, nicht die Reihenfolge im Dokument. Wer ein Item optisch nach vorn holt, ändert nichts daran, wann es vorgelesen wird oder wann es beim Tabben an der Reihe ist.