CSS Grid vs Flexbox: Wann du welches Tool nutzen solltest

CSS Grid und Flexbox sind die Eckpfeiler modernen Web-Designs. Oft werden sie als Konkurrenten dargestellt, doch in der Praxis sind sie zwei unterschiedliche Werkzeuge für verschiedene Aufgaben. Während Grid für zweidimensionale Layouts konzipiert ist, bei denen Zeilen und Spalten präzise definiert werden müssen, eignet sich Flexbox ideal für eindimensionale Anordnungen. In diesem Guide klären wir die Unterschiede und zeigen dir anhand von "Copy-Paste"-Rezepten, wie du diese Systeme effizient kombinierst.

Der fundamentale Unterschied: 1D vs. 2D

Der wichtigste Unterschied liegt in der Dimensionalität:

• Flexbox ist eindimensional. Elemente werden entlang einer Achse – entweder in einer Zeile oder einer Spalte – angeordnet. Ein Zeilenumbruch ist möglich, aber jede Reihe agiert autonom.
• CSS Grid ist zweidimensional. Du kontrollierst gleichzeitig Zeilen und Spalten, was eine punktgenaue Platzierung in einem definierten Gitter ermöglicht.

Kurz gesagt: Flexbox ist perfekt für die Navigation oder die Anordnung innerhalb von Komponenten. Grid ist deine erste Wahl, wenn es um das Skelett einer ganzen Webseite, ein Dashboard oder eine Fotogalerie geht.

Flexbox: Grundlagen und Anwendung

Flexbox verteilt den verfügbaren Platz in einem Container entlang der Hauptachse (standardmäßig horizontal) und steuert die Ausrichtung auf der Querachse.

.flex-container {
    display: flex;
    flex-direction: row;       /* Hauptachse: horizontal */
    justify-content: center;   /* Ausrichtung auf Hauptachse */
    align-items: center;       /* Ausrichtung auf Querachse */
    gap: 1rem;                 /* Abstand zwischen Elementen */
    flex-wrap: wrap;           /* Umbruch erlauben */
}

.flex-item {
    flex: 1 1 200px;
    /* flex-grow: 1   — wächst, um Platz zu füllen */
    /* flex-shrink: 1 — schrumpft bei Bedarf */
    /* flex-basis: 200px — ideale Ausgangsbreite */
}

Wichtige Flexbox-Properties

• justify-content — verteilt Elemente auf der Hauptachse (z.B. space-between, center).
• align-items — regelt die vertikale Ausrichtung auf der Querachse.
• flex-wrap — entscheidet, ob Elemente bei Platzmangel in die nächste Zeile rutschen.
• gap — die sauberste Art, Abstände ohne unschöne Margin-Hacks zu erzeugen.
• order — sortiert Elemente visuell um, ohne die HTML-Struktur zu verändern.

CSS Grid: Das Layout-Powerhouse

Mit Grid legst du das Raster deines Designs fest und platzierst Elemente anschließend in die vorgesehenen Zellen.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 gleiche Spalten */
    grid-template-rows: auto 1fr auto;       /* Header, Content, Footer */
    gap: 1.5rem;
    min-height: 100vh;
}

/* Platzierung der Elemente */
.header  { grid-column: 1 / -1; }  /* Spannt über alle Spalten */
.sidebar { grid-column: 1; }
.main    { grid-column: 2 / -1; }
.footer  { grid-column: 1 / -1; }

Wichtige Grid-Properties

• grid-template-columns/rows — definiert die Struktur des Rasters.
• fr Einheit — verteilt den freien Platz anteilig (Fractional Unit).
• repeat() — spart Code bei wiederkehrenden Spaltenmustern.
• grid-template-areas — ermöglicht visuell intuitive Benennung von Layout-Bereichen.
• minmax() — definiert flexible Mindest- und Maximalgrößen für Rasterzellen.

Direkter Vergleich: Alignment

/* Flexbox Zentrierung */
.center-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Grid Zentrierung — deutlich kürzer */
.center-grid {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

Für einfache Zentrierungen ist place-items: center im Grid unschlagbar. Benötigst du jedoch eine spezifische Verteilung entlang einer Achse, bietet Flexbox die präziseren Optionen.

Das Beste aus beiden Welten: Verschachtelung

Profis nutzen Grid für den groben Seitenaufbau und Flexbox innerhalb der Grid-Zellen für die Feinabstimmung der Komponenten.

/* Seite via Grid */
.page {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 60px 1fr 50px;
}

/* Navbar im Grid nutzt Flexbox */
.navbar {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Responsive Design ohne Media-Queries

Mit auto-fit oder auto-fill in Kombination mit minmax() erstellt Grid responsive Gitter vollautomatisch.

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}
/* Passt sich fließend an den Viewport an, keine Media-Queries notwendig! */

Praxis-Rezepte

Rezept 1: Das "Holy Grail" Layout

Dank grid-template-areas ist das klassische 3-Spalten-Layout mit Header und Footer in Sekunden erstellt.

.holy-grail {
    display: grid;
    grid-template-areas:
        "header header header"
        "left main right"
        "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
}

Rezept 2: Sidebar mit Scroll-Funktion

.sidebar-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    height: 100vh;
}
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }

Entscheidungshilfe

• Wähle Flexbox wenn: Du eine Reihe oder Spalte organisierst, bei der die Inhalte die Breite bestimmen sollen (Buttons, Icons, Menüs).
• Wähle CSS Grid wenn: Du ein festes Layout-Skelett hast, bei dem Elemente in Zeilen und Spalten ausgerichtet werden müssen (Dashboards, Layout-Raster).
• Vermeide häufige Fehler:
  • Nutze keine Margins für Abstände, wenn du gap verwenden kannst.
  • Versuche nicht, komplexe 2D-Layouts mit Flexbox "hinzubiegen".
  • Vergiss min-width: 0 bei Flex-Items nicht, um Textüberlauf-Probleme zu verhindern.

Fazit

CSS Grid und Flexbox sind Teamplayer. Beherrsche beide, und du wirst für jede Layout-Herausforderung das perfekte Werkzeug zur Hand haben, um modernen, sauberen und performanten Code zu schreiben.