CSS Grid Layout: grid-template-columns, Bereiche und gap – das Layout-Modul für zwei Achsen

Der Grid-Container: display: grid und grid-template-columns

display: grid macht ein Element zum Grid-Container. grid-template-columns legt die Spalten fest, grid-template-rows die Zeilen; fehlen Zeilen, entstehen sie nach Bedarf. Die Einheit fr steht für einen Anteil am freien Platz: 2fr 1fr sind zwei Spalten im Verhältnis zwei zu eins. repeat(3, 1fr) spart die Wiederholung, minmax(12em, 1fr) gibt einer Spalte eine Unter- und Obergrenze.

.seite {
  display: grid;
  grid-template-columns: 16em 1fr;
  gap: 2em;
}

gap: Zwischenräume ohne Außenabstände

gap (früher grid-gap) setzt den Abstand zwischen Zeilen und Spalten – nur dazwischen, nicht am Rand. Das erledigt, wofür Layouts aus CSS 2.1 Außenabstände an jedem Kind brauchten, mit der Ausnahme für das letzte Kind in jeder Zeile. gap gilt seit 2021 auch für Flex-Container.

Zellen zuweisen: grid-column, grid-row und grid-template-areas

Ohne weitere Angabe füllen die Kinder das Raster in Quelltextreihenfolge. grid-column: 1 / 3 lässt ein Kind von Linie 1 bis Linie 3 reichen, also zwei Spalten; grid-row tut dasselbe für Zeilen. Lesbarer sind benannte Bereiche: grid-template-areas zeichnet das Layout als Text, jedes Kind bekommt mit grid-area seinen Namen.

.seite {
  display: grid;
  grid-template-columns: 16em 1fr;
  grid-template-areas:
    "kopf   kopf"
    "leiste inhalt"
    "fuss   fuss";
}
header { grid-area: kopf; }
nav    { grid-area: leiste; }
main   { grid-area: inhalt; }
footer { grid-area: fuss; }

Raster ohne Media Query: auto-fit und minmax

repeat(auto-fit, minmax(14em, 1fr)) erzeugt so viele Spalten, wie mit mindestens 14em Breite in den Container passen, und verteilt den Rest gleichmäßig. Wird der Container schmaler, fallen Spalten weg; wird er breiter, kommen welche dazu. Für Übersichten und Listen ersetzt diese eine Zeile eine Reihe von Media Queries.

Implizite Spuren: was mit dem Rest passiert

Das mit grid-template-columns und grid-template-rows beschriebene Raster ist das ausdrückliche. Passen mehr Kinder hinein, als darin Platz haben, legt der Browser weitere Spuren an – die impliziten. Ihre Größe richtet sich nach dem Inhalt, sofern nichts anderes gesagt ist; mit grid-auto-rows und grid-auto-columns lässt sie sich vorgeben. Das ist der Grund, warum ein Raster mit drei angegebenen Spalten und zwölf Kindern klaglos vier Reihen bildet, die nirgends im Stylesheet stehen.

In welche Richtung diese Spuren entstehen, bestimmt grid-auto-flow: reihenweise als Vorgabe, spaltenweise auf Wunsch. Der zusätzliche Wert für dichtes Packen lässt den Browser Lücken mit später kommenden, kleineren Kindern auffüllen – praktisch für eine Galerie mit verschieden großen Bildern, und mit derselben Einschränkung wie order bei Flexbox: Die Reihenfolge auf dem Bildschirm stimmt dann nicht mehr mit der im Quelltext überein.

Ausrichtung innerhalb des Rasters

Grid unterscheidet zwei Fragen, die leicht durcheinandergehen: wie die Spuren im Container liegen und wie der Inhalt in seiner Zelle liegt. Das Erste regeln justify-content und align-content – sie kommen nur zum Tragen, wenn das Raster kleiner ist als der Container, also bei festen Spurbreiten. Das Zweite regeln justify-items und align-items am Container beziehungsweise justify-self und align-self am einzelnen Kind.

Der Ausgangswert für beide Selbst-Angaben ist das Strecken über die volle Zelle, und daraus ergibt sich das erwartete Verhalten: Alle Karten einer Reihe sind gleich hoch, unabhängig von ihrem Inhalt. Wer eine einzelne Karte oben halten will, setzt an ihr align-self: start. Für beide Achsen zusammen gibt es die Kurzformen mit place- davor, die zuerst die Blockachse und dann die Inline-Achse nehmen – also senkrecht vor waagerecht, was sich der umgekehrten Erwartung wegen leicht falsch merkt.

Was das Raster mit der Reihenfolge macht

Kinder eines Rasters lassen sich an beliebige Stellen setzen, unabhängig davon, wo sie im Quelltext stehen. Das ist die größte Freiheit, die Grid bietet, und zugleich die größte Gefahr: Die Reihenfolge beim Vorlesen und beim Springen mit der Tabulatortaste bleibt die des Quelltextes. Eine Anordnung, die auf dem Bildschirm von links nach rechts liest und im Quelltext anders steht, ergibt für einen Teil der Leser eine andere Seite.

Die Regel dazu steht ausdrücklich in der Spezifikation und ist eindeutig: Umsortieren ist für Fälle gedacht, in denen die Reihenfolge keine Bedeutung trägt. Wo sie eine trägt, gehört sie in den Quelltext. In der Praxis heißt das, den Quelltext in der Reihenfolge zu schreiben, in der man ihn vorgelesen haben will, und das Raster darum herum zu bauen – nicht umgekehrt. Für die schmale Ansicht ist das ohnehin die richtige Reihenfolge, weil das Raster dort meist zu einer einzigen Spalte zusammenfällt.

Grid und CSS 2.1: was aus Tabellenlayouts und Floats wird

Das Tutorial Vom Tabellenlayout zum CSS-Layout zeigt, wie viel Aufwand ein Kopf-Leiste-Inhalt-Fuß-Layout mit Floats verlangte: Breiten, Außenabstände, Clearing, Reihenfolge im Quelltext. Grid erledigt dasselbe mit einem Bereichsplan und lässt die Quelltextreihenfolge frei – ein Gewinn für Zugänglichkeit, weil der Inhalt im Dokument vor der Navigation stehen kann und trotzdem rechts erscheint. Flexbox bleibt für einachsige Anordnungen innerhalb der Bereiche.

Häufige Fragen