CSS Flexbox vs Grid: Wann welches verwenden

31. März 2026 · 12 Min. Lesezeit

Die Wahl zwischen CSS Flexbox und Grid kann überwältigend wirken, besonders wenn beide die gleichen Layout-Probleme lösen zu können scheinen. Die Wahrheit ist, sie sind für unterschiedliche Zwecke konzipiert, und das Verständnis ihrer Stärken wird dich zu einem effektiveren Entwickler machen.

Dieser Leitfaden erklärt alles, was du über Flexbox und Grid wissen musst, von Kernkonzepten bis zu realen Anwendungen. Am Ende wirst du genau wissen, welches Werkzeug du in jedem Layout-Szenario einsetzen solltest.

Flexbox-Grundlagen (1D-Layout)

Flexbox ist für eindimensionale Layouts konzipiert — das Anordnen von Elementen in einer einzelnen Zeile oder Spalte. Es glänzt bei der Verteilung von Raum und der Ausrichtung von Elementen entlang einer Achse, was es perfekt für Navigationsleisten, Button-Gruppen und Inhalte macht, die in eine einzelne Richtung fließen.

Kernkonzepte

Jedes Flexbox-Layout hat einen Flex-Container (Elternelement) und Flex-Items (Kindelemente). Der Container steuert die Richtung, das Umbruchverhalten und die Ausrichtung seiner Items:

/* Der Flex-Container */
.container {
  display: flex;
  flex-direction: row;      /* row | row-reverse | column | column-reverse */
  justify-content: center;  /* Ausrichtung auf der Hauptachse */
  align-items: center;      /* Ausrichtung auf der Querachse */
  gap: 1rem;                /* Abstand zwischen Items */
  flex-wrap: wrap;          /* Items dürfen in nächste Zeile umbrechen */
}

/* Flex-Items */
.item {
  flex: 1;                  /* Wachsen, um verfügbaren Platz zu füllen */
  /* Kurzform für: flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
}

.item-fixed {
  flex: 0 0 200px;          /* Nicht wachsen, nicht schrumpfen, 200px breit */
}

Haupt- und Querachse verstehen

Der Schlüssel zur Beherrschung von Flexbox ist das Verständnis seiner zwei Achsen. Die Hauptachse verläuft in der durch flex-direction festgelegten Richtung (horizontal bei row, vertikal bei column). Die Querachse verläuft senkrecht dazu.

Dieses Achsensystem bestimmt, welche Eigenschaften welche Dimensionen steuern. justify-content arbeitet immer auf der Hauptachse, während align-items auf der Querachse arbeitet.

Ausrichtungs-Eigenschaften

/* Hauptachse (horizontal bei row-Richtung) */
.container {
  justify-content: flex-start;   /* Standard: Items am Anfang packen */
  justify-content: flex-end;     /* Items am Ende packen */
  justify-content: center;       /* Items zentrieren */
  justify-content: space-between;/* Gleicher Abstand zwischen Items */
  justify-content: space-around; /* Gleicher Abstand um Items herum */
  justify-content: space-evenly; /* Gleicher Abstand überall */
}

/* Querachse (vertikal bei row-Richtung) */
.container {
  align-items: stretch;    /* Standard: strecken, um Container zu füllen */
  align-items: flex-start; /* Oben ausrichten */
  align-items: flex-end;   /* Unten ausrichten */
  align-items: center;     /* Vertikal zentrieren */
  align-items: baseline;   /* Text-Grundlinien ausrichten */
}

Die Flex-Eigenschaft erklärt

Die flex-Eigenschaft ist eine Kurzform für drei Eigenschaften: flex-grow, flex-shrink und flex-basis. Das individuelle Verständnis dieser hilft dir, präzisere Layouts zu schreiben.

• flex-grow: Wie stark das Item relativ zu anderen Items wachsen soll (Standard: 0)
• flex-shrink: Wie stark das Item schrumpfen soll, wenn Platz begrenzt ist (Standard: 1)
• flex-basis: Die Anfangsgröße vor dem Wachsen oder Schrumpfen (Standard: auto)

.item-grow {
  flex: 1;        /* Entspricht: 1 1 0% */
}

.item-fixed {
  flex: 0 0 200px; /* Nicht wachsen oder schrumpfen, bei 200px bleiben */
}

.item-shrink {
  flex: 0 1 auto;  /* Nicht wachsen, aber kann bei Bedarf schrumpfen */
}

Grid-Grundlagen (2D-Layout)

CSS Grid ist für zweidimensionale Layouts gebaut — die gleichzeitige Steuerung von Zeilen und Spalten. Es ist die erste Wahl für Seitenlayouts, Karten-Grids und jedes Design, bei dem du präzise Kontrolle über beide Dimensionen benötigst.

Kernkonzepte

Grid-Layouts bestehen aus einem Grid-Container und Grid-Items. Anders als Flexbox ermöglicht Grid die Definition expliziter Tracks (Zeilen und Spalten) und die Platzierung von Items überall innerhalb dieser Struktur:

/* Der Grid-Container */
.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;  /* 3 Spalten */
  grid-template-rows: auto 1fr auto;     /* 3 Zeilen */
  gap: 1rem;                             /* Abstand zwischen Zellen */
  grid-auto-flow: row;                   /* Wie automatisch platzierte Items fließen */
}

/* Grid-Items */
.item {
  grid-column: 1 / 3;    /* Spanne von Spaltenlinie 1 bis 3 */
  grid-row: 1 / 2;       /* Erste Zeile belegen */
}

.item-area {
  grid-area: header;     /* In benanntem Bereich platzieren */
}

Grid-Linien und Tracks verstehen

Grid erstellt nummerierte Linien zwischen Tracks. Ein 3-Spalten-Grid hat 4 vertikale Linien (1, 2, 3, 4). Items werden platziert, indem angegeben wird, zwischen welchen Linien sie sich erstrecken.

Tracks sind die Räume zwischen Linien — deine tatsächlichen Spalten und Zeilen. Du kannst sie mit festen Einheiten (px), flexiblen Einheiten (fr) oder inhaltsbasierter Größe (auto, min-content, max-content) dimensionieren.

Die FR-Einheit

Die fr-Einheit ist Grids Superkraft. Sie repräsentiert einen Bruchteil des verfügbaren Platzes und verteilt ihn proportional auf Tracks:

.container {
  grid-template-columns: 1fr 2fr 1fr;  /* Mittlere Spalte bekommt 2x Platz */
  grid-template-columns: 200px 1fr;    /* Feste Seitenleiste, flexibler Inhalt */
  grid-template-columns: repeat(3, 1fr); /* Drei gleiche Spalten */
}

Benannte Grid-Bereiche

Grids Template-Areas-Feature ermöglicht das Erstellen von Layouts mit ASCII-Art-ähnlicher Syntax, was komplexe Layouts lesbar macht:

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Auto-Platzierung und Grid Auto Flow

Grid kann Items, die du nicht explizit positionierst, automatisch platzieren. Die grid-auto-flow-Eigenschaft steuert, ob Items zuerst Zeilen (Standard) oder zuerst Spalten füllen:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;  /* Lücken mit kleineren Items füllen */
}

Direkter Vergleich

Vergleichen wir Flexbox und Grid über wichtige Dimensionen hinweg, um ihre grundlegenden Unterschiede zu verstehen:

Konzeptionelle Unterschiede

Der grundlegende Unterschied läuft auf Kontrolle hinaus. Flexbox ist von innen nach außen — Items beeinflussen das Layout basierend auf ihrer Inhaltsgröße. Grid ist von außen nach innen — du definierst zuerst die Struktur, dann platzierst du Inhalte darin.

Denke an Flexbox wie an ein flexibles Lineal, das sich an das anpasst, was du misst. Grid ist eher wie Millimeterpapier, bei dem du die Struktur im Voraus festlegst.

Wann Flexbox verwenden

Flexbox glänzt in Szenarien, in denen Inhalte in eine einzelne Richtung fließen und Items sich an verfügbaren Platz anpassen müssen. Hier sind die Situationen, in denen Flexbox deine beste Wahl ist:

Navigationsleisten und Menüs

Navigationskomponenten sind das Paradebeispiel für Flexbox. Items fließen natürlich in einer Zeile, und oft möchtest du, dass sie Platz gleichmäßig verteilen oder sich an entgegengesetzten Enden ausrichten:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

Button-Gruppen und Toolbars

Wenn du eine Sammlung von Buttons oder Tools hast, die nebeneinander sitzen sollen, handhabt Flexbox den Abstand und die Ausrichtung perfekt:

.button-group {
  display: flex;
  gap: 0.5rem;
}

.toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}

Medienobjekte

Das klassische Medienobjekt-Muster (Bild auf einer Seite, Inhalt auf der anderen) ist trivial mit Flexbox:

.media {
  display: flex;
  gap: 1rem;
}

.media-image {
  flex: 0 0 100px;  /* Bild mit fester Breite */
}

.media-content {
  flex: 1;  /* Inhalt nimmt verbleibenden Platz */
}

Formular-Steuerelemente

Eingabegruppen, bei denen ein Label, Input und Button in einer Zeile sitzen, sind perfekt für Flexbox:

.input-group {
  display: flex;
  gap: 0.5rem;
}

.input-group input {
  flex: 1;  /* Input wächst, um Platz zu füllen */
}

.input-group button {
  flex: 0 0 auto;  /* Button bleibt bei natürlicher Größe */
}

Vertikales Zentrieren