CSS Grid
Grid ordnet Elemente in zwei Dimensionen an — Zeilen und Spalten zugleich. Wo Flexbox „eine Reihe ausrichten" ist, ist Grid „ein Raster aufspannen". Es ist das Werkzeug für ganze Seitenlayouts, Karten-Galerien und Dashboards.
Du definierst das Raster am Container mit grid-template-columns. Die Einheit fr heißt „ein Anteil des freien Platzes" — repeat(3, 1fr) macht drei gleich breite Spalten, die sich den Platz teilen.
Playground
3 Spalten · gap 10px
span 2
2
3
4
5
6
7
CSSdein aktuelles Raster
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid .featured {
grid-column: span 2;
}Das responsive Auto-Raster (ohne Media Queries)
Eine der mächtigsten Zeilen in CSS: ein Raster, das die Spaltenzahl von selbst an die Breite anpasst.
CSS
.galerie {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}Lies es als: „so viele Spalten wie passen, jede mindestens 180px breit, sonst teilt euch den Rest gleichmäßig". Auf dem Handy wird das eine Spalte, auf dem Desktop fünf — ganz ohne Breakpoints.
Warum eigentlich? — Wann Grid, wann Flexbox?
Faustregel: Grid für das Layout in zwei Richtungen (das Seitenraster, eine Galerie), Flexbox für eine Richtung (eine Toolbar, Buttons in einer Reihe). Ein anderer Blick: Bei Grid gibst du das Raster vor und die Inhalte ordnen sich ein („layout-first"). Bei Flexbox bestimmen die Inhalte und ihre Größen den Fluss („content-first"). Beide schließen sich nicht aus — ein Grid-Item ist oft selbst ein Flex-Container.
Häufiger Denkfehler — Höhen von Hand setzen statt das Raster machen lassen
Anfänger (und manche KI) bauen Karten-Galerien mit fixen width: 33% plus float und kämpfen dann mit Umbrüchen und Abständen. Grid mit auto-fit / minmax erledigt das in zwei Zeilen und bleibt responsive. Wenn du in KI-Code viele width: 33.33% oder float sieht, ist das ein Kandidat zum Vereinfachen.
Tiefer rein — Linien, Bereiche & grid-template-areas
Grid nummeriert die Linien zwischen den Spalten/Zeilen. Ein Item kann von Linie 1 bis 3 reichen: grid-column: 1 / 3. Für ganze Layouts gibt es benannte Bereiche:Das ist Layout, das man lesen kann — die ASCII-Skizze ist das Layout.
CSS
.app {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
}
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }