← Zurück zu Einheit 03

Flexbox vs. CSS Grid im Vergleich

Dieses Beispiel zeigt dieselben Inhalte mit Flexbox und CSS Grid nebeneinander. So sehen Sie die Unterschiede und können entscheiden, welches Layout-System für welchen Anwendungsfall besser geeignet ist.

Demo 1: Karten-Layout für Sammlungsobjekte

Drei Karten mit Sammlungsobjekten. Flexbox und Grid erzielen hier ein ähnliches Ergebnis, aber Grid bietet präzisere Kontrolle über die Spaltenbreite.

Flexbox

Richtbeil

1798

Strafvollzug im 18. Jahrhundert

Schandmaske

ca. 1650

Ehrenstrafe für öffentliche Vergehen

Folterzange

um 1720

Instrument der peinlichen Befragung

CSS Grid

Richtbeil

1798

Strafvollzug im 18. Jahrhundert

Schandmaske

ca. 1650

Ehrenstrafe für öffentliche Vergehen

Folterzange

um 1720

Instrument der peinlichen Befragung

Flexbox-CSS

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flex-container .karte {
  flex: 1 1 200px;  /* Wachsen, Schrumpfen, min. 200px */
}

Grid-CSS

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

Unterschied

Bei Flexbox bestimmt der Inhalt die Größe der Items (flex-basis). Bei Grid bestimmt das Raster die Größe (grid-template-columns). Grid-Spalten sind immer gleich breit, Flex-Items können je nach Inhalt variieren.

Demo 2: Navigationsleiste

Eine typische Navigationsleiste mit Logo links und Links rechts. Hier ist Flexbox die natürlichere Wahl, weil es um eine eindimensionale Anordnung geht.

Flexbox (empfohlen)

CSS Grid (funktioniert auch)

Flexbox-CSS

.flexbox-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Grid-CSS

.grid-nav {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.grid-nav__links {
  justify-self: end;
}

Empfehlung

Für Navigationsleisten ist Flexbox die bessere Wahl: Weniger Code, intuitivere Ausrichtung mit justify-content: space-between, und die Items passen sich flexibel an den verfügbaren Platz an.

Demo 3: Seitenlayout mit Sidebar

Ein typisches Seitenlayout mit Header, Sidebar, Hauptinhalt und Footer. Hier zeigt CSS Grid seine Stärke, weil es zweidimensionale Platzierung ermöglicht.

CSS Grid (empfohlen)

Willkommen

Hier wird der Hauptinhalt angezeigt. Die Sidebar ist links, der Inhalt rechts.

Flexbox (mehr Aufwand)

Willkommen

Gleiches Layout mit Flexbox. Braucht einen extra Wrapper für Sidebar + Main.

Grid-CSS

.grid-seitenlayout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
}

/* Header und Footer ueber beide Spalten */
.layout-header,
.layout-footer {
  grid-column: 1 / -1;
}

Flexbox-CSS

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

/* Extra Wrapper fuer Sidebar + Main */
.layout-body {
  display: flex;
  flex: 1;
}

.layout-sidebar {
  width: 200px;
  flex-shrink: 0;
}

.layout-main {
  flex: 1;
}

Empfehlung

Für Seitenlayouts mit Header, Sidebar und Footer ist CSS Grid klar im Vorteil: Kein zusätzlicher Wrapper nötig, grid-column: 1 / -1 lässt Header und Footer über alle Spalten gehen, und die Zeilenhöhen werden automatisch verteilt.

Zusammenfassung

Anwendungsfall	Empfehlung	Begründung
Navigationsleiste	Flexbox	Eindimensional, flexibler Platzverbrauch
Button-Gruppe	Flexbox	Ausrichtung und Abstände in einer Zeile
Zentrierter Inhalt	Flexbox	justify-content + align-items: center
Karten-Galerie	Grid	Gleichmäßige Spalten, auto-fill
Seitenlayout mit Sidebar	Grid	Zweidimensional, Spanning möglich
Dashboard	Grid	Komplexe Zellanordnungen
Formular-Felder	Grid	Gleichmäßige Spalten für Labels + Inputs

Merke

In der Praxis kombiniert man Flexbox und Grid: Grid für das Gesamtlayout der Seite, Flexbox für einzelne Komponenten wie Navigation, Buttons oder Karten-Inhalte innerhalb der Grid-Zellen.