CSS Grid Layout: Der vollständige Praxisguide für 2D-Layouts

Jahrelang haben Webentwickler Layouts mit Floats, Tabellen-Hacks und einem Wust aus Wrapper-Divs zusammengebastelt. Mit CSS Grid ist das vorbei. Grid ist das erste echte zweidimensionale Layout-System im Browser: Du kontrollierst Zeilen und Spalten gleichzeitig und beschreibst dein Layout fast so, wie du es auf Papier skizzieren würdest. In diesem Guide gehe ich von den Grundlagen bis zu fortgeschrittenen Techniken, die du im Alltag wirklich brauchst.

Grid vs. Flexbox: Wann nimmst du was?

Die häufigste Frage zuerst, weil sie so oft falsch beantwortet wird: Grid und Flexbox konkurrieren nicht, sie ergänzen sich. Flexbox arbeitet eindimensional – entweder in einer Reihe oder einer Spalte. Es ist ideal, wenn du eine Gruppe von Elementen entlang einer Achse verteilen willst, etwa eine Navigationsleiste oder eine Button-Gruppe.

Grid arbeitet zweidimensional – es kontrolliert Zeilen und Spalten zugleich. Sobald dein Layout ein echtes Raster bildet (Header, Sidebar, Content, Footer), ist Grid die richtige Wahl. In der Praxis nutzt man beides kombiniert: Grid für das Seitengerüst, Flexbox für die Inhalte innerhalb der einzelnen Zellen.

Das Grundgerüst: Container und Tracks

Ein Grid entsteht, sobald du einem Element display: grid gibst. Damit wird es zum Grid-Container, und seine direkten Kinder werden zu Grid-Items. Die eigentliche Magie passiert über die Definition der Tracks – das sind die Spalten und Zeilen.

• grid-template-columns: Definiert die Spalten. grid-template-columns: 200px 1fr 200px erzeugt drei Spalten: zwei feste Außenspalten und eine flexible Mitte.
• grid-template-rows: Definiert die Zeilen analog. Oft lässt man die Zeilen implizit entstehen.
• gap: Der Abstand zwischen den Zellen. gap: 1rem ersetzt das fehleranfällige Margin-Gefrickel früherer Tage.

Wichtig zu verstehen: Du definierst nicht die Items, sondern das Raster. Die Items fließen anschließend automatisch hinein – oder du platzierst sie gezielt.

Die fr-Einheit: Flexibler Raum verständlich gemacht

Die fr-Einheit (fractional unit) ist die wichtigste Neuerung von Grid. Sie steht für einen Anteil am verfügbaren freien Raum. Schreibst du grid-template-columns: 1fr 1fr 1fr, bekommst du drei gleich breite Spalten. Mit 2fr 1fr wird die erste Spalte doppelt so breit wie die zweite.

Der Clou: fr berechnet sich nach Abzug fester Größen und Gaps. Eine Definition wie 250px 1fr reserviert exakt 250 Pixel für die Sidebar und gibt der zweiten Spalte den gesamten Rest. Genau dieses Verhalten musste man früher mühsam mit Prozentrechnung und calc() nachbauen.

repeat, minmax, auto-fit und auto-fill

Hier wird Grid erst richtig mächtig. Statt zehnmal 1fr zu tippen, schreibst du repeat(10, 1fr). Kombiniert mit minmax() entsteht ein responsives Raster fast ohne Media Queries:

• minmax(250px, 1fr): Jede Spalte ist mindestens 250 Pixel breit, darf aber wachsen.
• auto-fit: Erzeugt so viele Spalten wie hineinpassen und streckt vorhandene Items auf die volle Breite, wenn Platz frei wird.
• auto-fill: Verhält sich ähnlich, hält aber leere Spalten-Tracks vor, statt die Items zu strecken.

Das Kronjuwel des responsiven Designs lautet damit: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). Dieses eine Zeilchen baut ein Karten-Layout, das sich von einem breiten Desktop-Monitor bis zum Smartphone automatisch anpasst – ohne einen einzigen Breakpoint. Genau solche Layouts brauchst du etwa für die Karten-Galerien im Webtools-Bereich.

grid-template-areas: Layouts zum Anfassen

Meine Lieblingsfunktion, weil sie Layouts geradezu visuell beschreibbar macht. Mit grid-template-areas vergibst du benannte Regionen und zeichnest dein Layout als ASCII-Karte:

1. Im Container definierst du die Bereiche zeilenweise, etwa "header header" "sidebar main" "footer footer".
2. Jedem Kind-Element weist du dann grid-area: header beziehungsweise main, sidebar oder footer zu.
3. Für ein mobiles Layout änderst du in einer Media Query nur die Areas-Definition – die Items bleiben unverändert.

Der riesige Vorteil: Du musst keine Zeilen- und Spaltennummern jonglieren. Das Layout ist im Stylesheet auf einen Blick lesbar, und Umbauten sind eine Sache von Sekunden. Ein Punkt (.) markiert dabei eine leere Zelle.

Items gezielt platzieren: Linien und Spans

Grid nummeriert seine Linien (nicht die Zellen) ab 1. Ein Item, das von der ersten bis zur dritten Spaltenlinie reicht, schreibst du als grid-column: 1 / 3. Praktischer ist oft die span-Notation: grid-column: span 2 sagt schlicht „zwei Spalten breit", egal wo das Item gerade landet.

Mit negativen Liniennummern zählst du vom Ende: grid-column: 1 / -1 spannt ein Element über die gesamte Breite des Rasters – ideal für ein Banner, das über alle Spalten hinweg läuft.

Subgrid: Die lang ersehnte Lösung für Verschachtelung

Lange Zeit war ein Problem ungelöst: Wenn ein Grid-Item selbst ein Grid wird, kannte sein inneres Raster die äußeren Tracks nicht. Karten in einer Galerie richteten ihre Überschriften und Buttons deshalb nicht sauber auf gleicher Höhe aus.

Subgrid löst das. Mit grid-template-rows: subgrid übernimmt das verschachtelte Grid die Track-Definition des Elternrasters. Alle Karten teilen sich so dieselben Zeilenhöhen, und Titel, Text und Footer fluchten exakt. Subgrid wird seit 2023/2024 von allen großen Browsern (Firefox, Safari, Chrome) unterstützt und ist heute praxistauglich.

Ausrichtung: justify und align

Grid bringt ein vollständiges Set an Ausrichtungseigenschaften mit, das viele verwirrt, weil die Namen ähnlich klingen. Merke dir die Achsen:

• justify-* betrifft die horizontale Achse (Spalten), align-* die vertikale (Zeilen).
• justify-items / align-items richten den Inhalt innerhalb jeder Zelle aus.
• justify-content / align-content verteilen das gesamte Raster im Container, falls dieser größer ist als das Grid.
• place-items: center ist die Kurzform, um Inhalte sowohl horizontal als auch vertikal zu zentrieren – der eleganteste Weg, etwas mittig zu setzen.

Häufige Stolperfallen

Ein paar Dinge, über die fast jeder einmal stolpert: Prozentangaben in gap beziehen sich auf die Größe des Containers, nicht auf den Restraum – nutze lieber feste Einheiten wie rem. Außerdem wirken Grid-Eigenschaften nur auf direkte Kinder; verschachtelte Elemente brauchen ein eigenes Grid oder Subgrid. Und schließlich erzeugt der implizite Grid (Zeilen, die du nicht definiert hast) Tracks mit der Größe auto; willst du sie steuern, nutze grid-auto-rows.

Browser-Support und Fazit

CSS Grid wird seit 2017 von allen relevanten Browsern unterstützt; selbst Subgrid ist seit 2024 breit verfügbar. Den aktuellen Stand kannst du jederzeit auf einer Kompatibilitätsdatenbank prüfen – mehr dazu in unserem Beitrag zu caniuse. Für das Feintuning von Abständen und Größen hilft dir außerdem ein Blick in unsere Tailwind-CSS-Einführung, denn auch Utility-Frameworks setzen unter der Haube auf Grid.

Mein Rat: Fang klein an. Baue ein simples Drei-Spalten-Layout mit repeat(auto-fit, minmax()), spiele mit grid-template-areas und du wirst schnell merken, wie viel Wrapper-Markup du sparst. Grid ist nicht nur leistungsfähiger als alte Techniken, es macht deinen Code auch deutlich lesbarer.