Grid Container

CSS Grid ist das mächtigste Layout-System in CSS. Mit display: grid verwandelst du ein Element in einen Grid-Container, der ein zweidimensionales Raster aus Zeilen und Spalten aufspannt. Im Gegensatz zu Flexbox, das eindimensional arbeitet, kontrollierst du mit Grid beide Achsen gleichzeitig. In diesem Artikel lernst du die Grundlagen: wie du einen Grid-Container erstellst, Spalten und Zeilen definierst und die fr-Einheit für flexible Größen nutzt.

Steckbrief Grid Container

Syntax: display: grid | inline-grid
Initialwert: (siehe Einzeleigenschaften)
Vererbt: Nein
Animierbar: Nein

Kategorie: Grid
Werte: 15
Beispiele: 5
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 03.07.2026

Grundlagen

Wenn du display: grid auf ein Element setzt, wird es zum Grid-Container. Seine direkten Kinder werden automatisch zu Grid-Items. Ohne weitere Angaben ordnet der Browser die Items untereinander in einer einzigen Spalte an, weil das Grid standardmäßig nur eine Spalte hat.

Das Besondere an Grid ist die Trennung von Container und Platzierung. Du definierst am Container, wie viele Spalten und Zeilen das Raster hat. Die Items füllen dieses Raster dann automatisch von links nach rechts, Zeile für Zeile. Du kannst Items aber auch gezielt an bestimmte Positionen setzen.

Grid unterscheidet zwischen dem expliziten Grid (die Spalten und Zeilen, die du mit grid-template-columns und grid-template-rows definierst) und dem impliziten Grid (zusätzliche Zeilen oder Spalten, die der Browser automatisch erstellt, wenn mehr Items vorhanden sind als Plätze im expliziten Grid).

display: grid erzeugt einen Block-Level-Container. Wenn du einen Inline-Container brauchst (z.B. in einem Textfluss), verwende display: inline-grid.

Ein Grid-Item kann übrigens selbst wieder ein Grid-Container sein. So ein verschachteltes Grid ist zunächst komplett unabhängig: Seine Spalten und Zeilen haben keinen Bezug zum äußeren Raster. Wenn sich ein inneres Grid an den Tracks des Elterngrids ausrichten soll, hilft dir Subgrid weiter.

Syntax & Werte

15 Werte

grid-template-columns

Wert	Beschreibung	Beispiel
`none`	Keine expliziten Spalten definiert (Standard). Items werden in einer Spalte gestapelt.	grid-template-columns: none
`<length>`	Feste Spaltenbreite in px, rem oder anderen Einheiten.	grid-template-columns: 200px 100px 200px
`<fr>`	Flexible Einheit: verteilt den verfügbaren Platz anteilig.	grid-template-columns: 1fr 2fr 1fr
`auto`	Spalte passt sich an den Inhalt an.	grid-template-columns: auto 1fr auto
`repeat()`	Wiederholt ein Spaltenmuster. Spart Tipparbeit.	grid-template-columns: repeat(3, 1fr)
`minmax()`	Definiert eine Mindest- und Maximalgröße für die Spalte.	grid-template-columns: repeat(3, minmax(100px, 1fr))
`auto-fill`	Füllt den Container mit so vielen Spalten wie möglich (leere Spalten bleiben erhalten).	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))
`auto-fit`	Wie auto-fill, aber leere Spalten werden auf 0 zusammengeklappt.	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))

grid-template-rows

Wert	Beschreibung	Beispiel
`none`	Keine expliziten Zeilen definiert (Standard). Zeilen werden automatisch nach Bedarf erstellt.	grid-template-rows: none
`<length>`	Feste Zeilenhöhe.	grid-template-rows: 60px 200px 60px
`<fr>`	Flexible Zeilenhöhe, verteilt verfügbaren Platz anteilig.	grid-template-rows: 1fr 2fr
`auto`	Zeile passt sich an den Inhalt an.	grid-template-rows: auto 1fr auto
`minmax()`	Mindest- und Maximalhöhe für die Zeile.	grid-template-rows: minmax(100px, auto)

grid-template (Shorthand)

Wert	Beschreibung	Beispiel
`<rows> / <columns>`	Definiert Zeilen und Spalten in einer Deklaration.	grid-template: 60px 1fr 60px / 200px 1fr
`none`	Setzt alle Template-Werte auf none zurück.	grid-template: none

Beispiele

5 Beispiele

Drei gleich breite Spalten mit 1fr 1fr 1fr. Jede Spalte bekommt den gleichen Anteil am verfügbaren Platz.

3-Spalten-Grid mit 1fr

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

<div class="demo">
<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
</div>

display: grid erzeugt einen Block-Container (nimmt die volle Breite ein), display: inline-grid erzeugt einen Inline-Container (nur so breit wie nötig).

grid vs. inline-grid

/* Block-Container: volle Breite */
.grid-block {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

/* Inline-Container: nur so breit wie nötig */
.grid-inline {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  gap: 8px;
}

<div class="demo">
<div class="label">display: grid (volle Breite)</div>
<div class="grid-block">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
<div class="label">display: inline-grid (nur so breit wie nötig)</div>
<div class="grid-inline">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
</div>

fr steht für “fraction” und verteilt den verfügbaren Platz anteilig. 1fr 2fr 1fr bedeutet: die mittlere Spalte bekommt doppelt so viel Platz wie die äußeren.

fr-Einheit: anteilige Verteilung

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 8px;
}

/* 1fr + 2fr + 1fr = 4 Teile
   Spalte 1: 25%, Spalte 2: 50%, Spalte 3: 25% */

<div class="demo">
<div class="grid-fr">
  <div class="item">1fr</div>
  <div class="item">2fr</div>
  <div class="item">1fr</div>
</div>
</div>

repeat() spart Tipparbeit bei sich wiederholenden Spalten. In Kombination mit minmax() und auto-fill bekommst du ein responsives Grid ohne Media Queries.

Responsives Grid mit repeat() und minmax()

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

/* auto-fill: so viele Spalten wie Platz ist
   minmax(120px, 1fr): mindestens 120px, maximal 1fr */

<div class="demo">
<div class="grid-responsive">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>
</div>

grid-template kombiniert Zeilen und Spalten in einer Deklaration. Der Schrägstrich / trennt Zeilen von Spalten.

grid-template Shorthand

.container {
  display: grid;
  grid-template: 50px 1fr 40px / 120px 1fr;
  gap: 8px;
  height: 200px;
}

/* Entspricht: */
/* grid-template-rows: 50px 1fr 40px; */
/* grid-template-columns: 120px 1fr; */

<div class="demo">
<div class="grid-template">
  <div class="item">Header L</div>
  <div class="item">Header R</div>
  <div class="item">Sidebar</div>
  <div class="item">Main</div>
  <div class="item">Footer L</div>
  <div class="item">Footer R</div>
</div>
</div>

Barrierefreiheit

Grid ermöglicht dir, die visuelle Darstellung von der DOM-Reihenfolge zu trennen. Doch genau das kann zum Problem werden: Die Tab-Reihenfolge für Tastaturnutzer und die Lesereihenfolge für Screenreader folgen immer der DOM-Reihenfolge, nicht dem visuellen Layout im Grid.

Wenn du Items mit grid-column oder grid-row umordnest, sehen sehende Nutzer eine andere Reihenfolge als Screenreader-Nutzer. Das verletzt WCAG 1.3.2 (Meaningful Sequence) und kann besonders bei interaktiven Elementen wie Links, Buttons oder Formularen verwirrend sein.

Best Practice: Halte die DOM-Reihenfolge logisch und nutze Grid nur für die visuelle Platzierung. Bei responsiven Layouts, bei denen sich die visuelle Reihenfolge ändert (z.B. Sidebar wechselt von links nach oben), ist das unproblematisch, solange die DOM-Reihenfolge in allen Breakpoints Sinn ergibt. Teste dein Layout immer mit der Tab-Taste, um sicherzustellen, dass die Fokusreihenfolge für Tastaturnutzer nachvollziehbar bleibt.

Häufige Fehler

5 Fehler

01 Grid wirkt nur auf direkte Kinder

Wie bei Flexbox werden nur die direkten Kinder des Grid-Containers zu Grid-Items. Enkelelemente sind keine Grid-Items. Wenn du ein tieferes Element positionieren willst, brauchst du ein verschachteltes Grid.

02 fr kann zu 0 schrumpfen

Wenn der Inhalt einer fr-Spalte leer ist und andere Spalten feste Größen haben, kann eine fr-Spalte auf 0 zusammenschrumpfen. Verwende minmax(0, 1fr) oder gib eine Mindestgröße an.

03 auto-fill vs. auto-fit verwechseln

auto-fill behält leere Spalten bei (der Platz bleibt reserviert). auto-fit klappt leere Spalten zusammen, sodass die vorhandenen Items den gesamten Platz einnehmen. Für responsive Card-Grids willst du meistens auto-fit.

04 Zeilen sind standardmäßig auto

Wenn du nur Spalten definierst, sind die Zeilen automatisch so hoch wie ihr Inhalt. Wenn du eine feste Zeilenhöhe brauchst, musst du grid-template-rows oder grid-auto-rows setzen.

05 Grid statt Flexbox für 1D-Layouts verwenden

Für einfache Reihen (Navigation, Button-Gruppen) ist Flexbox oft die bessere Wahl. Grid lohnt sich, wenn du ein echtes zweidimensionales Raster brauchst.

Browser-Kompatibilität

5 von 5

CSS Grid wird von allen modernen Browsern vollständig unterstützt. Es ist seit 2017 in allen relevanten Browsern stabil und kann bedenkenlos eingesetzt werden.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

CSS Grid hat in HTML-Emails sehr eingeschränkten Support. Nur Apple Mail und Thunderbird unterstützen es teilweise. Für E-Mail-Layouts solltest du auf Tabellen-basierte Layouts zurückgreifen.

Apple Mail

Teilweise

Grundlegende Grid-Eigenschaften werden unterstützt
Gmail

Keine

Grid wird komplett ignoriert
Outlook

Keine

Kein Grid-Support, Tabellen-Layouts verwenden
Thunderbird

Teilweise

Grundlegende Grid-Eigenschaften werden unterstützt
Yahoo Mail

Keine

Kein Grid-Support

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da