CSS Grid

Grid ordnet in zwei Richtungen zugleich an. Du beschreibst das Raster am Container, und die Kinder fügen sich ein. Es ist das stärkste Layout-Werkzeug in CSS, und die Grundlagen sind einfacher als sie aussehen.

Was du am Ende kannst

Spalten und Zeilen mit fr, repeat und minmax anlegen
Elemente über Linien platzieren
ein Layout mit benannten Bereichen beschreiben
Kartenraster ohne Media Query bauen
begründet zwischen Flexbox und Grid wählen

Live-Coding zum Mitmachen

⤓ demo-14-grid.zip herunterladen

Der Ordner starter ist der Ausgangsstand, fertig der Stand nach dem Live-Coding.

Enthält: index.html, stil.css

Spalten und Zeilen

Feste und flexible Spalten

.raster { display: grid; grid-template-columns: 8rem 1fr 2fr; gap: 0.5rem; }
.raster div { padding: 0.25rem 0.5rem; background: #c7d2fe; }

<div class="raster">
  <div>8rem</div><div>1fr</div><div>2fr</div>
  <div>Nächste</div><div>Zeile</div><div>automatisch</div>
</div>

Die Einheit fr bedeutet „Anteil am freien Platz“. grid-template-rows funktioniert genauso, oft genügt aber die automatische Zeilenhöhe. gap setzt die Abstände.

grid-template-columns: repeat(3, 1fr);       /* drei gleiche Spalten */
grid-template-columns: 14rem 1fr;            /* Seitenleiste und Rest */
grid-template-columns: minmax(10rem, 1fr) 2fr;  /* mit Untergrenze */

Über Linien platzieren

Zwischen den Spalten liegen nummerierte Linien, von 1 an, und von hinten mit negativen Zahlen.

1      2      3      4      5
│ Spalte│ Spalte│ Spalte│ Spalte│
-5     -4     -3     -2     -1

Über mehrere Zellen

.raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.raster div { padding: 0.25rem 0.5rem; background: #c7d2fe; }
.breit { grid-column: 1 / 4; background: #fbcfe8 !important; }
.hoch { grid-row: span 2; background: #bbf7d0 !important; }
.ganz { grid-column: 1 / -1; background: #fde68a !important; }

<div class="raster">
  <div class="breit">grid-column: 1 / 4</div>
  <div class="hoch">grid-row: span 2</div>
  <div>eins</div><div>zwei</div><div>drei</div>
  <div class="ganz">grid-column: 1 / -1, die ganze Breite</div>
</div>

Schreibweise	Bedeutung
`grid-column: 1 / 4`	von Linie 1 bis Linie 4
`grid-column: span 2`	zwei Spalten breit, wo immer es passt
`grid-column: 1 / -1`	über die ganze Breite
`grid-row: span 2`	zwei Zeilen hoch

Benannte Bereiche

Du zeichnest das Layout im Stylesheet. Das liest sich fast wie eine Skizze und lässt sich später in einer Media Query einfach umzeichnen.

grid-template-areas

.seite {
  display: grid;
  grid-template-columns: 8rem 1fr;
  grid-template-areas:
    "kopf  kopf"
    "menue inhalt"
    "fuss  fuss";
  gap: 0.25rem;
}
.seite > * { padding: 0.5rem; background: #c7d2fe; }
.kopf { grid-area: kopf; }
.menue { grid-area: menue; }
.inhalt { grid-area: inhalt; min-height: 5rem; }
.fuss { grid-area: fuss; }

<div class="seite">
  <div class="kopf">kopf</div>
  <div class="menue">menue</div>
  <div class="inhalt">inhalt</div>
  <div class="fuss">fuss</div>
</div>

Ein Punkt (.) steht für eine leere Zelle.

So viele Spalten, wie passen

Diese eine Zeile ist vermutlich das Nützlichste am ganzen Tag:

Verändere die Fensterbreite

.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.5rem; }
.karten div { padding: 0.75rem; background: #c7d2fe; }

<div class="karten">
  <div>Eins</div><div>Zwei</div><div>Drei</div><div>Vier</div><div>Fünf</div>
</div>

grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));

Jede Spalte ist mindestens 9rem breit, und der Browser legt so viele an, wie passen. Der Rest wird gleichmäßig verteilt. Der Unterschied zu auto-fill: Dort bleiben leere Spalten bestehen, wenn es nur wenige Elemente gibt.

Flexbox oder Grid?

Gleicher Inhalt, verschiedene Logik

Frage	Flexbox	Grid
Wer bestimmt die Größe?	der Inhalt	das Raster
Richtungen	eine	zwei
Müssen Elemente in Spalten fluchten?	nein	ja
Typisch	Kopfleiste, Menü, Knopfreihe, Karteninhalt	Seitengerüst, Kartenraster, Formular, Dashboard

Beide schließen sich nicht aus. Üblich ist Grid für das Große, Flexbox für das Kleine. So ist auch unsere App aufgebaut.

Der Grid-Inspektor

Die Marke grid im Elements-Tab blendet das Raster mit Liniennummern und Bereichsnamen ein. Firefox gilt hier als besonders gut und zeigt im Layout-Tab mehrere Raster gleichzeitig.

Live-Coding: Das App-Gerüst

Wir machen das body-Element zum Raster, statt die Seite mit weiteren div zu verschachteln, und ersetzen die Flexbox im Brett durch das Raster von oben.

/* Das Gerüst der App: benannte Bereiche, man liest das Layout direkt ab */
body {
  display: grid;
  grid-template-columns: 14rem 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "kopf         kopf"
    "seitenleiste inhalt";
  min-height: 100dvh;
}

.kopf {
  grid-area: kopf;
}

.seitenleiste {
  grid-area: seitenleiste;
}

.inhalt {
  grid-area: inhalt;
}

/* Menü untereinander */
.seitenleiste ul {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
}

/* Das Brett: so viele Spalten wie passen, jede mindestens 16rem breit */
.brett {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  align-items: start;
  gap: var(--abstand-m);
}

Übung

Starter für die Übung

⤓ uebung-14-grid.zip herunterladen

ZIP-Datei entpacken und den Ordner in VS Code öffnen (Datei → Ordner öffnen).

Enthält: index.html, stil.css, uebersicht.css, uebersicht.html

uebersicht.html ist eine Übersichtsseite. Schreibe das Layout in uebersicht.css.

Stufe 1: Kacheln

.kacheln zeigt die Kennzahlen als Raster: so viele Spalten, wie passen, jede mindestens 10rem breit.

Stufe 2: Bereiche

.bereiche soll so aussehen. Verwende grid-template-areas.

┌──────────────┬───────┐
│              │ Fällig│
│  Verlauf     ├───────┤
│              │ Team  │
├──────────────┴───────┤
│  Hinweise            │
└──────────────────────┘

Die linke Spalte ist doppelt so breit wie die rechte.

Stufe 3: Prüfen

Schalte den Grid-Inspektor ein und kontrolliere das Raster. Wie sieht es bei einem schmalen Fenster aus? Was müsste man ändern? (Morgen lösen wir das.)

Für Schnelle

Die erste Kachel soll zwei Spalten breit sein. Überlege dir außerdem, wie du .bereiche ohne Namen, nur mit Linien, beschreiben würdest.