CSS Grid vs Flexbox: Wann welches Layout?

Von Jan-Tristan Rudat , Redakteur

Aktualisiert: Juni 2026

Die Frage „Grid oder Flexbox?" stellt sich in fast jedem Frontend-Projekt, und sie hat eine erstaunlich klare Antwort, sobald man eine einzige Eigenschaft verstanden hat: die Dimension. Flexbox denkt in einer Linie, CSS Grid denkt in einem Raster. Wer das verinnerlicht, wählt das passende Werkzeug fast automatisch richtig. In diesem Ratgeber gehen wir den Unterschied praxisnah durch, mit einer Vergleichstabelle, konkreten Szenarien und Code, den Sie direkt übernehmen können.

Der eine Unterschied, der alles erklärt: eindimensional vs. zweidimensional

Flexbox ist ein eindimensionales Layout-Modul. Es ordnet seine Kinder entlang einer Hauptachse an, entweder in einer Zeile (flex-direction: row) oder in einer Spalte (column). Die Anordnung in der jeweils anderen Richtung passiert nur indirekt, etwa durch Umbruch mit flex-wrap. Flexbox eignet sich also immer dann, wenn der Inhalt fließen darf und nur eine Richtung wirklich zählt.

CSS Grid ist zweidimensional. Es kontrolliert Spalten und Zeilen gleichzeitig. Sie definieren ein Raster mit grid-template-columns und grid-template-rows und platzieren Elemente gezielt in den entstehenden Zellen. Grid ist deshalb das Werkzeug, wenn das Layout zuerst feststeht und der Inhalt sich einordnet.

Der zweite, oft übersehene Unterschied ist der gedankliche Ausgangspunkt: Flexbox arbeitet vom Inhalt her (content-out), Grid arbeitet vom Layout her (layout-in). Bei Flexbox bestimmen die Elemente, wie viel Platz sie brauchen, und der Container verteilt den Rest. Bei Grid legen Sie das Raster fest, und die Elemente fügen sich ein.

Direkter Vergleich: Grid und Flexbox in der Tabelle

Die folgende Tabelle stellt die Eigenschaften gegenüber, die in der Praxis den Ausschlag geben. Beide Module sind im offiziellen CSS-Standard spezifiziert (CSS Grid Layout Module Level 1, CSS Flexible Box Layout Module Level 1).

Praxis-Szenario 1: Navigationsleiste (Flexbox gewinnt)

Eine Navigationsleiste hat ein Logo links und Menüpunkte rechts. Das ist eine klassische eindimensionale Aufgabe: alle Elemente liegen in einer Zeile, der Abstand zwischen Logo und Menü soll flexibel sein. Flexbox löst das mit drei Zeilen Code.

.nav {
  display: flex;
  align-items: center;      /* vertikal mittig */
  justify-content: space-between; /* Logo links, Menü rechts */
  gap: 1.5rem;
}

Hier wäre Grid Overkill. Sie müssten Spalten definieren, obwohl die Elemente einfach nur nebeneinander fließen sollen. justify-content: space-between erledigt den Rest, ganz unabhängig davon, wie viele Menüpunkte hinzukommen.

Praxis-Szenario 2: Karten-Galerie und Seitenlayout (Grid gewinnt)

Eine Galerie aus gleich großen Karten, die sich automatisch an die Bildschirmbreite anpasst, ist die Paradedisziplin von CSS Grid. Mit auto-fit und minmax brauchen Sie dafür keine einzige Media Query:

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

Jede Karte ist mindestens 240 Pixel breit. Passt eine weitere Spalte in die verfügbare Breite, fügt Grid sie automatisch hinzu, sonst bricht es um. Mit Flexbox ginge das auch, aber die Karten in der letzten Zeile würden sich ungleichmäßig dehnen, weil Flexbox eben keine echten Spalten kennt.

Dasselbe gilt für ein komplettes Seitenlayout mit Header, Sidebar, Hauptbereich und Footer. Hier richten benannte Bereiche das Raster sauber aus, etwas, das Flexbox strukturell nicht leisten kann:

.seite {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 1rem;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Der häufigste Fehler: Grid und Flexbox als Konkurrenten zu sehen

In der Praxis ist die Frage selten „entweder Grid oder Flexbox", sondern fast immer „beides, jeweils an der richtigen Stelle". Die beiden Module ergänzen sich, sie ersetzen sich nicht. Ein typisches Muster sieht so aus:

• Grid für die Makro-Struktur: Das Seitengerüst aus Header, Inhalt und Footer wird mit Grid gebaut.
• Flexbox für die Mikro-Struktur: Innerhalb einer einzelnen Karte werden Bild, Titel, Text und Button mit Flexbox vertikal angeordnet.
• Verschachtelung ist erlaubt: Ein Grid-Item darf selbst display: flex haben. Das ist kein Anti-Pattern, sondern der vorgesehene Weg.

Wer einmal verinnerlicht hat, dass Grid die Räume schafft und Flexbox sie füllt, schreibt deutlich weniger CSS und wartbareren Code. Es lohnt sich, beide Module sicher zu beherrschen, statt sich auf eines festzulegen.

Entscheidungshilfe: drei Fragen, die genügen

Wenn Sie sich unsicher sind, beantworten Sie der Reihe nach diese drei Fragen. Spätestens die zweite gibt fast immer eine eindeutige Antwort.

1. Geht es um Zeilen und Spalten zugleich? Ja: Grid. Nein, nur eine Richtung: weiter zu Frage 2.
2. Soll der Inhalt seine Größe selbst bestimmen? Ja, Elemente fließen je nach Inhalt: Flexbox. Nein, sie sollen sich an ein festes Raster halten: Grid.
3. Müssen Elemente sich überlappen oder exakt an Linien ausgerichtet werden? Ja: Grid. Das kann Flexbox nicht leisten.

Ein praktischer Tipp zum Ausprobieren: Bauen Sie ein Raster zunächst visuell im CSS Grid Generator auf und exportieren Sie den Code. So sehen Sie sofort, ob Ihre Layout-Idee als Grid funktioniert oder ob eine einfache Flexbox-Zeile die schlankere Lösung ist.

Häufige Fragen zu Grid und Flexbox

Quellen

• MDN Web Docs: CSS Grid Layout
• MDN Web Docs: CSS Flexible Box Layout (Flexbox)
• MDN Web Docs: Relationship of grid layout to other layout methods
• W3C: CSS Grid Layout Module Level 1
• W3C: CSS Flexible Box Layout Module Level 1
• W3C: WCAG 2.1, Erfolgskriterium 1.3.2 Meaningful Sequence

Verwandte Artikel