CSS Grid vs. Flexbox: Wann nutze ich was?

CSS Grid und Flexbox sind beide mächtige Layout-Tools. Aber wann nutzt man welches? Hier ist mein praktischer Guide.

Flexbox: Für eindimensionale Layouts

Flexbox ist perfekt für Layouts in einer Richtung (Zeile ODER Spalte).

Typische Anwendungen:

• Navigation
• Card-Footer mit Buttons
• Vertikales Zentrieren
• Elemente gleichmäßig verteilen

/* Navigation mit Flexbox */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* Zentrieren (horizontal + vertikal) */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

CSS Grid: Für zweidimensionale Layouts

Grid ist ideal für komplexe Zeilen UND Spalten Layouts.

Typische Anwendungen:

• Gesamtes Seitenlayout
• Bildergalerien
• Card-Grids
• Dashboard-Layouts

/* Responsive Card Grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Dashboard Layout */
.dashboard {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 60px 1fr;
    grid-template-areas:
        "sidebar header"
        "sidebar main";
    min-height: 100vh;
}

.sidebar { grid-area: sidebar; }
.header { grid-area: header; }
.main { grid-area: main; }

Kombinieren ist erlaubt!

/* Grid für das Layout, Flexbox für die Cards */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.card {
    display: flex;
    flex-direction: column;
}

.card-footer {
    margin-top: auto; /* Pushed ans Ende */
    display: flex;
    justify-content: space-between;
}

Faustregeln

• Eine Dimension? → Flexbox
• Zwei Dimensionen? → Grid
• Elemente verteilen? → Flexbox
• Präzise Platzierung? → Grid

Grid und Flexbox sind keine Konkurrenten – sie ergänzen sich perfekt!