CSS Grid: In Rastern denken

vom 26.01.2017 von Oliver Misch

Grid ist das Layoutsystem für zwei Dimensionen: Du definierst Spalten und Zeilen, und die Kinder ordnen sich ins Raster ein oder spannen sich über mehrere Zellen. Was früher nur mit Layout-Tabellen ging (die dunkle Vergangenheit dazu steht bei den Tabellenlayouts), macht Grid sauber, flexibel und im CSS statt im HTML.

Das Grundprinzip

CSS-Code

.raster {
    display: grid;
    grid-template-columns: 2fr 1fr;   /* zwei Spalten, 2:1 */
    gap: 12px;
}

Die fr-Einheit ("fraction") verteilt den freien Platz anteilig: 2fr und 1fr ergeben zwei Drittel zu einem Drittel. Feste Werte gehen gemischt dazu: grid-template-columns: 200px 1fr baut eine feste Seitenleiste neben flexiblem Inhalt. Die Kinder füllen das Raster automatisch zeilenweise auf, ganz ohne eigene Angabn.

Zellen aufspannen

.kopf {
    grid-column: 1 / -1;    /* von der ersten bis zur letzten Linie */
}

Einzelne Kinder lassen sich gezielt platzieren und über mehrere Spalten oder Zeilen strecken. grid-column: 1 / -1 ist das Idiom für "volle Breite", typisch für Kopf- und Fußzeilen im Seitenraster. Wer es noch sprechender mag, schaut sich grid-template-areas an, damit malt man das Layout förmlich als Textbild ins CSS.

Der Selbstläufer für Kartenraster

.karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

Diese eine Zeile baut ein Raster das sich selbst anpasst: So viele Spalten wie bei mindestens 220 Pixeln Breite hineinpassen, der Rest wird gleichmäßig verteilt, auf dem Handy bleibt eine Spalte übrig. Responsive ganz ohne Media Query, eine der elegantesten Zeilen in ganz CSSS.

Typische Fehler

• Grid auf die Kinder statt auf den Container anwenden.
• Für eine simple Reihe zu Grid greifen wo Flexbox mit drei Zeilen fertig wäre.
• Pixelgenaue Raster festnageln statt fr und minmax() arbeiten zu lassen.

Weiter im Lernpfad: Media Queries · Verwandt: Flexbox