CSS Grid
Flexbox hat Elemente in einer Richtung ausgerichtet. CSS Grid öffnet das nächste Kapitel: Zeilen und Spalten zusammen. Schalte display: grid ein, skizziere Tracks, setze gap — und geh später in den Grid-Container-, Items-, Areas- und Responsive-Lektionen tiefer.
Ein Grid-Starter-Werkzeugkasten
📊 Grid auf einen Blick
| Idee | Alltagsaufgabe |
|---|---|
| Grid-Container | Elternteil mit display: grid (oder inline-grid) |
| Grid-Items | Direkte Kinder, die im Raster sitzen |
| Tracks | Zeilen und Spalten, die das Gitter bilden |
| Zellen / Areas | Plätze, an denen Items landen (Areas kommen später) |
gap |
Abstände zwischen Tracks ohne Margin-Tricks |
fr-Einheit |
Freien Restplatz unter Tracks teilen (Vorschau) |
Denk an Grid wie an Karopapier für die Seite: zuerst Spalten und Zeilen zeichnen, dann Inhalt in die Zellen legen. Flexbox bleibt stark für Toolbars und einachsige Gruppen.
display: grid — das Gitter einschalten
Setze display: grid auf dem Elternteil. Kinder werden automatisch Grid-Items — für das Grundmodell brauchst du keine Extra-Klasse.
.board {
display: grid;
}
Zuerst Spalten — eine einfache Vorlage
grid-template-columns definiert vertikale Tracks. Drei gleiche Spalten sind eine ruhige Startskizze für Karten oder Kacheln.
.board {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
gap — ehrliche Zwischenräume
Nutze gap (oder row-gap / column-gap), damit Abstände konsistent bleiben, wenn Tracks umfließen. Bevorzuge gap statt Margins auf jedes Kind zu streuen.
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
Eine kleine Kartenmatrix
Dieselbe Idee wie eine Galerie-Skizze — gleiche Tracks plus gap — aber du sprichst jetzt Grid, nicht nur flex-wrap.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.cards__item {
min-height: 8rem;
}
fr — Restplatz teilen
Die Einheit fr teilt freien Platz unter Tracks auf. 2fr 1fr macht die erste Spalte doppelt so breit wie die zweite, wenn Platz übrig bleibt.
.shell {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5rem;
}
Eine ruhige Grid-Gewohnheit
Nutze Grid für zweidimensionale Seiten-Shells und Matrizen. Nutze Flexbox für eindimensionale Reihen. Starte mit display: grid, einfachen grid-template-columns und gap. Tiefe Auto-Platzierung, benannte Areas und responsive Grid-Tracks gehören in die nächsten Lektionen.
.page {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}
.page__main,
.page__rail {
min-width: 0;
}
Selbst ausprobieren
- Erstelle einen Container mit
display: grid. - Setze
grid-template-columns: repeat(3, 1fr). - Füge
gap: 1remzwischen Tracks hinzu. - Probiere
2fr 1frfür eine Main-+-Rail-Shell. - Schreib einen Satz: Wann würdest du trotzdem Flexbox wählen?
Häufige Fehler
display: gridauf jedes Element setzen ohne Layout-Bedarf- Erwarten, dass Flexbox-Wrap allein ein echtes 2D-Grid ersetzt
gapüberspringen und ewig mit Kind-Margins kämpfen- Zu benannten Areas springen, bevor Basis-Tracks natürlich wirken
- Ganze Seiten-Shells mit float bauen, wenn Grid besser passt
Zusammenfassung
- CSS Grid ist zweidimensional: Zeilen und Spalten zusammen
display: gridmacht Kinder zu Grid-Itemsgrid-template-columns(und später Zeilen) definieren Tracksgapundfrhalten Abstände und freien Platz ruhig- Tiefere Container-, Item-, Area- und Responsive-Grid-Lektionen folgen
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt