CSS Grid erklärt: Zeilen, Spalten, Bereiche und wann Grid statt Flexbox

Sie haben display: grid und grid-template-columns: repeat(3, 1fr) gesehen, aber beim ersten Versuch, ein echtes Seitenlayout zu bauen, fügen sich die Teile nicht so zusammen, wie Sie es erwartet haben. Grid ist das mächtigste Layoutsystem, das CSS je ausgeliefert hat — und das am stärksten von allem Vorherigen verschiedene. Haben Sie einige Denkmodelle verinnerlicht — Tracks, Linien, Bereiche und das implizite Grid —, ist der Rest nachschlagbares Detail. Diese Anleitung baut diese Modelle von Grund auf.

Grid ist zweidimensional

Dieser eine Satz ist der ganze Grund, warum Grid existiert: Flexbox legt entlang einer Achse gleichzeitig aus; Grid definiert Zeilen und Spalten im Voraus. Ein Flex-Container ermittelt sein Layout, während Elemente eintreffen; ein Grid-Container ist eine feste Tabelle aus Zellen, in die Elemente platziert werden. Alles Weitere in dieser Anleitung ist eine Konsequenz dieses Unterschieds — einschließlich der Entscheidung, welches man nutzt (die Kurzfassung: Seitengerüste und Kartenraster → Grid; eine Gruppe entlang einer Linie verteilen → Flexbox).

Tracks: Zeilen und Spalten

Die Zeilen und Spalten eines Grids sind seine Tracks, erzeugt durch zwei Deklarationen:

display: grid;
grid-template-columns: 200px 1fr 1fr;   /* drei Spalten-Tracks */
grid-template-rows: 100px auto;         /* zwei Zeilen-Tracks */

Hier täte repeat(3, 1fr) dasselbe wie drei 1fr-Werte. Track-Größen können feste Längen (200px, 4rem), auto (inhaltsbasiert), Prozentsätze oder fr-Bruchteile sein — Letztere verdienen ihren eigenen Abschnitt.

Die Linien, die Tracks trennen und umgeben, sind Grid-Linien, nummeriert ab 1: Drei Spalten erzeugen vier vertikale Linien. Die Liniennummern nutzen Sie beim Platzieren von Elementen.

Die fr-Einheit und wie Track-Sizing funktioniert

fr ist ein Bruchteil des übrigen Platzes — keine Länge, kein Prozentsatz. Das ist der am meisten missverstandene Grid-Wert:

• Der Browser platziert zuerst die festen und auto-Tracks.
• Der verbleibende Platz wird unter den fr-Tracks im Verhältnis ihrer Zahlen aufgeteilt.

1fr 1fr 1fr sind also drei gleiche Anteile von dem, was nach den festen Tracks übrig bleibt, und 1fr 1fr 2fr gibt der dritten Spalte den doppelten Anteil. Zwei Konsequenzen sind es wert, verinnerlicht zu werden:

• 1fr ist nicht gleich 1px oder irgendeiner festen Breite — es ist „ein Anteil der Reste“.
• fr-Tracks laufen nicht über den Container hinaus, wie es 100%-Tracks tun. grid-template-columns: 1fr 1fr mit einem inhaltsreichen Track kann anmutig schrumpfen; 50% 50% plus ein großer Gap oder breiter Inhalt kann über den Rand schießen.

minmax() gibt einem Track eine Unter- und Obergrenze: minmax(200px, 1fr) bedeutet „mindestens 200px, dann wachsen, um den Rest zu füllen“ — der Baustein responsiver Layouts unten.

Elemente platzieren: Linien, Spans und Bereiche

Grid-Elemente werden automatisch in Zellen platziert, Zeile für Zeile, in Quellreihenfolge — viele Layouts brauchen nichts weiter. Wollen Sie Kontrolle, platzieren Sie Elemente gegen Liniennummern:

grid-column: 1 / 3;   /* beginne bei Linie 1, ende bei Linie 3 → umfasst 2 Spalten */
grid-row: 1 / 2;

Der Wert ist Start / Ende-Liniennummern. Weil drei Spalten vier Linien haben, bedeutet 1 / 3 „Spalten eins und zwei“. Die Span-Syntax ist freundlicher, wenn Sie nicht zählen wollen: grid-column: span 2 bedeutet „nimm zwei Spalten, wo auch immer du landest“. 1 / -1 ist ein nützliches Idiom für „vom Anfang bis zur letzten Linie“ — ein Header über die volle Breite.

Für alles Komplexere sind benannte Bereiche die lesbare Option.

grid-template-areas: Layout in ASCII

Benannte Bereiche lassen Sie die ganze Seitenstruktur in einer einzigen, ASCII-artigen Deklaration beschreiben:

display: grid;
grid-template-columns: 200px 1fr;
grid-template-areas:
  "header  header"
  "sidebar main"
  "footer  footer";

Jedes Kind beansprucht dann mit einer Zeile einen Platz: grid-area: header; (oder sidebar, main, footer). Das Layout ist auf einen Blick lesbar, und das Umarrangieren für einen mobilen Breakpoint ist so leicht wie das Neue-Templaten der Bereiche. Zwei Regeln: Jeder Bereich muss rechteckig sein (eine L-Form ist ungültig), und jede Zelle des Templates muss gefüllt sein — nutzen Sie . für leere Zellen.

Gaps und Ausrichtung

Gaps. gap (mit row-gap / column-gap) fügt Abstand zwischen Tracks hinzu. Es fügt nie Platz an den Rändern des Containers hinzu.

Elemente in Zellen ausrichten. justify-items (horizontal) und align-items (vertikal) positionieren ein Element innerhalb seiner eigenen Zelle; stretch ist der Standard, weshalb Grid-Elemente ihre Zellen füllen. justify-self / align-self überschreiben ein einzelnes Element.

Das Grid im Container ausrichten. Sind die Tracks kleiner als der Container — üblich bei auto-Inhaltszeilen —, positionieren justify-content und align-content das ganze Track-Grid (Werte wie center, space-between, space-evenly). Scheint ein Grid unerklärlichen Leerraum zu lassen, füllen die Tracks den Container nicht, und einer davon ist der Hebel.

Das implizite Grid und der Responsive-Trick

Platzieren Sie Elemente jenseits Ihrer deklarierten Tracks, erzeugt Grid spontan neue Tracks — das implizite Grid. Seine Standardgröße ist auto (inhaltsbasiert), und Sie können es steuern: grid-auto-rows: 100px macht jede automatisch erzeugte Zeile 100px hoch, und grid-auto-flow: dense lässt spätere Elemente Löcher füllen, die frühere ließen.

Der Trick, der endlose responsive Layouts antreibt:

display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;

Lesen Sie es als: „so viele Spalten, wie passen, jede zwischen 200px und einem Bruchteil der Zeile; leere zusammenklappen.“ Eine Deklaration gibt Ihnen ein Kartenraster, das von drei Spalten auf einem breiten Bildschirm bis zu einer auf einem Telefon fließt — ohne Media Queries. Die Feinheit ist auto-fit vs. auto-fill: auto-fit klappt Tracks ohne Elemente zusammen (die Zeile sieht also immer voll aus), während auto-fill die leeren Tracks behält und Leerraum lassen kann. Für Kartenraster wollen Sie fast immer auto-fit.

Grid vs. Flexbox: Die Entscheidung

• Grid — wenn das Layout Zeilen und Spalten hat, die übereinstimmen müssen: Seitengerüste, Kartenraster, Dashboards, alles, wo Sie die Zellentabelle vorstellen können, bevor der Inhalt kommt.
• Flexbox — wenn Sie eine Gruppe entlang einer Achse verteilen oder ausrichten: Navigationsleisten, Toolbars, Buttonreihen, ein Icon neben zwei Textzeilen.

Sie sind keine Rivalen — sie ergänzen sich. Das übliche Muster ist Grid für das Seitengerüst, Flexbox in jeder Zelle für die feinkörnige Ausrichtung. Wenn Sie noch entscheiden, deckt die Anleitung CSS Flexbox erklärt die eindimensionale Seite der Entscheidung ab.

Kurzreferenz

• Grid definiert Zeilen und Spalten im Voraus; Flexbox legt eine Achse gleichzeitig aus.
• fr = ein Anteil des übrigen Platzes, keine Länge — feste/auto-Tracks werden zuerst bemaßt, fr teilt den Rest.
• minmax(200px, 1fr) = „mindestens 200px, dann wachsen“.
• grid-column: 1 / 3 platziert ein Element zwischen Linie 1 und 3; span 2 und 1 / -1 sind praktische Varianten.
• grid-template-areas legt eine Seite in ASCII an; Bereiche müssen Rechtecke sein, . ist eine leere Zelle.
• justify-items/align-items platzieren Elemente in ihren Zellen (Standard stretch); justify-content/align-content platzieren das Track-Grid im Container.
• repeat(auto-fit, minmax(200px, 1fr)) = responsive Kartenraster ohne Media Queries.
• Zwei Dimensionen → Grid; eine Linie von Elementen → Flexbox.

Um ein Grid visuell zu entwerfen, lässt Sie der CSS-Grid-Generator Zeilen, Spalten und Bereiche aufziehen und kopiert das fertige CSS — und der CSS-Flexbox-Generator deckt die Flexbox-Hälfte des Layout-Werkzeugkastens ab.