CSS Flexbox vs Grid: Welches Layout-System solltest du nutzen?

Die Ein-Satz-Regel

Verwenden Sie Flexbox, wenn Sie Elemente in einer Richtung (eine Reihe oder eine Spalte) anordnen. Verwenden Sie CSS Grid, wenn Sie das Layout in zwei Richtungen gleichzeitig (Zeilen und Spalten simultan) steuern müssen.

Das ist im Grunde die gesamte Entscheidung. Alles andere ist eine Vertiefung darüber, warum diese Regel in der Praxis funktioniert.

Wofür Flexbox tatsächlich gut ist

Flexbox wurde für die Verteilung von Platz entlang einer einzelnen Achse entwickelt. Ihr Killer-Feature ist, dass Elemente natürlich wachsen, schrumpfen und umbrechen können, ohne dass Sie exakte Abmessungen für jedes einzelne angeben müssen.

Dies sind die Fälle, in denen Flexbox die richtige Wahl ist:

• Navigationsleisten — eine Reihe von Links, bei denen Sie bestimmte Elemente nach rechts schieben möchten (margin-left: auto) oder gleichmäßig verteilen wollen (justify-content: space-between>)
• Card-Reihen, bei denen jede Karte unabhängig von der Inhaltslänge die gleiche Höhe hat (align-items: stretch übernimmt dies automatisch)
• Zentrieren eines Elements horizontal und vertikal in einem Container — drei Zeilen CSS: display: flex; justify-content: center; align-items: center
• Button-Gruppen, Icon + Label-Kombinationen und jede Komponente, bei der Kinder nebeneinander mit etwas Abstand stehen müssen
• Umbrechende Listen, bei denen Sie möchten, dass Elemente in die nächste Zeile umbrechen, wenn nicht mehr genug Platz vorhanden ist (flex-wrap: wrap)

.navbar {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.navbar .logo { margin-right: auto; }
/* logo bleibt links, links bleiben rechts */

Wofür CSS Grid tatsächlich gut ist

Grid wurde für zweidimensionale Layouts entwickelt — Sie definieren sowohl Zeilen als auch Spalten und können Elemente präzise in Zellen platzieren, mehrere Zeilen oder Spalten überspannen und Abstände in beide Richtungen erstellen.

Dies sind die Fälle, in denen Grid die richtige Wahl ist:

• Seitenlayouts — Header, Sidebar, Hauptinhalt, Footer alle relativ zueinander positioniert
• Magazin- oder Dashboard-Layouts, bei denen verschiedene Elemente unterschiedliche Mengen an Platz einnehmen
• Bildgalerien mit einer konsistenten Grid-Struktur unabhängig von der Bildgröße
• Formularlayouts, bei denen Labels und Inputs sowohl horizontal als auch vertikal ausgerichtet werden müssen
• Jedes Layout, bei dem Sie gleichzeitig an Zeilen UND Spalten denken

.page {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    min-height: 100dvh;
}

Direktvergleich: Ein Card-Grid

Hier entsteht oft die Verwirrung. Beide Systeme können eine Reihe von Karten erstellen:

.card-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.card { flex: 1 1 280px; }

.card-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

Beide funktionieren. Die Grid-Version wird hier meist bevorzugt, weil auto-fill mit minmax ein vorhersehbareres Spaltenverhalten bietet — jede Spalte hat genau die gleiche Breite und das Grid fließt sauber. Die Flexbox-Version ist besser, wenn die Karten variable Breiten haben können und Sie möchten, dass sie den verfügbaren Platz flüssiger nutzen.

Der Unterschied in der Ausrichtung

In Flexbox richten Sie Elemente entlang der Hauptachse (die Richtung, die Sie gewählt haben) und der Querachse (senkrecht dazu) aus. Sie können nicht unabhängig die Position einer Zelle innerhalb eines unsichtbaren Gitters aus Zeilen und Spalten steuern.

In Grid lebt jedes Element in einer Zelle mit einer Zeilen- und einer Spaltenposition. Sie können ein Element explizit in Zeile 2, Spalte 3 platzieren oder den Browser die automatische Platzierung überlassen. Flexbox kennt kein Konzept von Zellen — Elemente fließen einfach in der von Ihnen angegebenen Richtung.

Häufige Fehler

Verwendung von Grid für einfaches Zentrieren: display: flex; align-items: center; justify-content: center ist schneller als ein Grid für ein einzelnes Element einzurichten. Flexbox gewinnt bei Aufgaben auf einer einzelnen Achse.

Verwendung von Flexbox für vollständige Seitenlayouts: Sobald Sie mehr als zwei Komponenten haben, die sich positionell zueinander beziehen müssen (Header + Sidebar + Inhalt + Footer), wird das Fehlen einer zweiten Achse bei Flexbox zum Problem. Grid löst dies mit benannten Bereichen (named areas).

Verwendung von Flexbox-Spalten als Ersatz für Grid-Zeilen: flex-direction: column lässt Elemente vertikal stapeln, aber Sie verlieren die Fähigkeit, Inhalte über mehrere Spalten hinweg gleichzeitig auszurichten. Wenn Sie an Spalten denken, wechseln Sie zu Grid.

Beides zusammen verwenden

Grid und Flexbox schließen sich nicht aus. Das häufigste Muster in der Praxis ist Grid für das Seitenlayout, Flexbox innerhalb jeder Sektion:

• Grid positioniert die Sidebar, den Header und den Hauptinhaltsbereich
• Innerhalb der Navigation (die im Header-Bereich liegt) übernimmt Flexbox die Reihe aus Logo + Links + CTA-Button
• Im Hauptinhaltsbereich verwendet ein Card-Grid Grid für die Spaltenstruktur
• Innerhalb jeder Karte übernimmt Flexbox das Layout von Icon + Text + Button

Dieses Kompositionsmuster — Grid für Struktur, Flexbox für Komponenten — ist die Art und Weise, wie die meisten modernen CSS-Frameworks (Tailwind, Bootstrap) intern arbeiten.

Schneller Eigenschaften-Vergleich