Grid Container

Zuletzt aktualisiert am 3. Juli 2026

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.

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

grid-template-columns

grid-template-rows

grid-template (Shorthand)

Beispiele

Einfaches 3-Spalten-Grid

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

.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>

grid vs. inline-grid

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

/* 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>

Die fr-Einheit

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.

.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() und minmax()

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

.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 Shorthand

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

.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

• 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.
• 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.
• 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.
• 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.
• 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

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.

Email-Kompatibilität

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.

Verwandte Eigenschaften