Flexbox oder Grid?

Die Faustregel: eine Dimension oder zwei?

• Flexbox: Ihr habt eine Reihe von Elementen, die in einer Richtung angeordnet werden - Navigation, Button-Reihe, eine Zeile mit Icon + Text
• Grid: Ihr wollt Zeilen und Spalten gleichzeitig kontrollieren - ein Seiten-Layout, eine Bildergalerie, ein Formular mit ausgerichteten Labels

Tipp

Faustregel: Fragt euch “brauche ich Kontrolle über Zeilen UND Spalten - oder reicht mir eine Richtung?” Reicht eine Richtung: Flexbox. Braucht ihr beides gleichzeitig: Grid.

Eine andere Unterscheidung: Will ich die größen der Spalten und Zeilen im Wrapper vorgeben, oder sollte das der Content selbst machen?

• Flexbox: Die jeweiligen Kinder innerhalb der Flexbox geben ihre eigenen Größen vor
• Grid: Du gibst im Wrapper vor, wie groß der Platz ist, den die jeweiligen Kinder einnehmen dürfen

Typische Anwendungsfälle im Vergleich

Aufgabe	Bessere Wahl
Navigationsleiste (Logo links, Links rechts)	Flexbox
Reihe von Buttons mit Abstand	Flexbox
Card zentrieren (horizontal + vertikal)	Flexbox
Ganzes Seiten-Layout (Header/Sidebar/Main/Footer)	Grid
Bildergalerie mit gleich großen Kacheln	Grid
Formular mit ausgerichteten Labels und Feldern	Grid

Die Falle: Prozentbreiten + gap in Flexbox

Wollt ihr in einer Flexbox z.B. drei gleich breite Kinder mit width: 33.33% erzeugen und zusätzlich gap für den Abstand dazwischen, kommt es zum Überlauf:

.row {
  display: flex;
  gap: 16px;
}

.row > * {
  width: 33.33%; /* Achtung! */
}

Warum das überläuft

gap wird zum Platz zusätzlich zu den Prozentbreiten eingefügt - die drei Kinder beanspruchen schon 100% der Breite, die beiden gap-Abstände (16px + 16px) kommen aber noch dazu. Das Ergebnis ist 32px breiter als der Container und läuft über ihn hinaus (oder die Kinder brechen um, falls flex-wrap: wrap gesetzt ist).

Der Grund: Prozentangaben bei Flexbox-Kindern beziehen sich immer auf die Breite des Containers, nicht auf den Platz, der nach Abzug der gaps übrig bleibt.

Die Lösung: Grid

Mit Grid gebt ihr die Breiten über grid-template-columns vor - gap wird dabei automatisch korrekt eingerechnet, nie addiert:

.row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

Tipp

Genau das ist einer der Hauptgründe, in der Praxis Grid statt Flexbox zu wählen, sobald ihr die Breiten der Kinder selbst vorgeben wollt UND gleichzeitig einen gap braucht: Grid rechnet den gap vom verfügbaren Platz ab, bevor es ihn auf die Spalten verteilt. Flexbox tut das bei Prozentbreiten nicht - dort bräuchtet ihr einen manuellen calc()-Trick wie width: calc(33.33% - 11px), um das Gleiche zu erreichen.

Sie schließen sich nicht aus

In der Praxis kombiniert ihr beide fast immer: Grid für das große Seiten-Layout, Flexbox für die kleineren Bausteine darin.

/* Grid für das große Ganze */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-areas: "sidebar main";
}

/* Flexbox für eine Komponente innerhalb einer Grid-Zelle */
.card-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

Hinweis

display: flex und display: grid gelten immer nur für die direkten Kinder des jeweiligen Containers. Ein .card-actions-Element mit display: flex innerhalb einer Grid-Zelle stört das äußere Grid überhaupt nicht - beide Layout-Systeme arbeiten unabhängig voneinander, jeweils auf ihrer eigenen Ebene.

Weitere Quellen zum Vertiefen

• A Complete Guide to Flexbox - die Referenz für alle Flexbox-Properties
• A Complete Guide to Grid - dieselbe Referenz für Grid
• Flexboxfroggy.com - Flexbox spielerisch üben, mit Fröschen
• CSS Grid Garden - dasselbe Prinzip für Grid, mit einem Gemüsegarten
• Use Cases For Flexbox - vertieft die Entscheidung Grid vs. Flexbox anhand echter Beispiele