Grid-Grundlagen

grid-template-columns: repeat(3, 1fr) erzeugt in einer Zeile Code drei gleiche Spalten, und der Browser setzt jedes Kind in die nächste freie Zelle.

Zeilen und Spalten zugleich

Grid, das CSS-Modul Grid Layout, ist für zweidimensionale Layouts gebaut: Zeilen und Spalten zusammen. Du zeichnest das Raster auf den Container, und die Items fallen in seine Zellen. Flexbox geht von den Items aus und lässt sie ihre Größe aushandeln. Grid geht vom Layout aus und setzt die Items hinein. Deshalb ist es das natürliche Werkzeug für Fotogalerien, Kartenlisten und die Grundform einer Seite mit Kopfbereich, Seitenleiste, Hauptinhalt und Fußbereich.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* three equal columns */
  gap: 10px;
}
.gallery .wide { grid-column: span 2; }    /* this item covers two columns */

Spuren und die Einheit fr

grid-template-columns listet die Breite jeder Spalte auf, einer sogenannten Spur (track). Du kannst jede Länge verwenden, etwa 200px 1fr, aber Grid bringt eine eigene Einheit mit: fr, ein Bruchteil des freien Platzes. 1fr 1fr 1fr ergibt drei gleiche Spalten, 2fr 1fr macht die erste Spalte doppelt so breit wie die zweite. Die Einheit fr verteilt nur den Platz, der nach festen Spuren und Lücken übrig bleibt. 200px 1fr ergibt also eine Seitenleiste von 200 Pixeln, und die Hauptspalte bekommt den Rest. repeat(3, 1fr) ist eine kürzere Schreibweise für 1fr 1fr 1fr. grid-template-rows macht dasselbe für Zeilen, aber oft lässt man die Zeilen in Ruhe, damit sie so hoch werden wie ihr Inhalt.

Items platzieren

Standardmäßig füllen Items das Raster in der Reihenfolge des Quelltexts, je eine Zelle, von links nach rechts und dann in die nächste Zeile. Um ein Item größer zu machen, lässt grid-column: span 2 es zwei Spalten abdecken und grid-row: span 2 zwei Zeilen. Die Linien zwischen den Spuren sind ab 1 nummeriert. Ein dreispaltiges Raster hat also die Linien 1 bis 4, und grid-column: 1 / 3 heißt von Linie 1 bis Linie 3. grid-column: 1 / -1 zieht ein Item über die ganze Breite, weil negative Zahlen vom Ende her zählen.

Bereiche benennen

Für ein Seitenlayout kannst du mit grid-template-areas das Layout mit Wörtern zeichnen. Jede Zeichenkette in Anführungszeichen ist eine Zeile, jedes Wort eine Zelle. Wiederholt man ein Wort, erstreckt sich ein Bereich über diese Zellen. Dann bekommt jedes Item grid-area mit dem passenden Namen. Das Layout unten liest sich fast wie eine Skizze: der Kopfbereich oben über die ganze Breite, Seitenleiste und Hauptinhalt nebeneinander und der Fußbereich unten. Um das Layout fürs Handy zu ändern, schreibt man nur diese paar Zeichenketten neu, oft innerhalb einer Media Query.

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "head head"
    "side main"
    "foot foot";
  gap: 16px;
}
header { grid-area: head; }
aside  { grid-area: side; }
main   { grid-area: main; }
footer { grid-area: foot; }

Spalten, die zum Bildschirm passen

Ein Muster aus den Grid-Anleitungen von MDN lohnt sich zum Auswendiglernen: grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)). minmax(150px, 1fr) sagt, dass jede Spalte mindestens 150 Pixel breit sein muss und wachsen darf, um den Platz zu teilen, und auto-fill erzeugt so viele Spalten, wie hineinpassen. Das Ergebnis ist eine Galerie, die auf dem Handy zwei Spalten zeigt und auf einem breiten Bildschirm fünf oder sechs, wieder ohne Media Query. Wie Flexbox kann auch Grid Items in einer anderen Reihenfolge als im HTML platzieren, und es gilt dieselbe Vorsicht: Lesereihenfolge und sichtbare Reihenfolge gleich halten.