CSS Grid und Flexbox sind die beiden modernen Layout-Systeme im Web. Aber wann nutzt du welches? In meiner Arbeit als Webentwickler höre ich diese Frage ständig — und die Antwort ist einfacher als du denkst. In diesem Artikel erkläre ich beide Systeme mit praktischen Code-Beispielen und zeige dir, wann du Grid und wann Flexbox wählen solltest.
Flexbox: Eindimensionale Layouts
Flexbox ist ideal für Layouts in einer Richtung — entweder horizontal (Zeile) oder vertikal (Spalte). Typische Anwendungsfälle: Navigationsleisten, Button-Gruppen, Card-Footer, zentrierte Inhalte.
/* Horizontale Navigation */
.nav {
display: flex;
gap: 1rem;
align-items: center;
}
/* Zentrieren — der Klassiker */
.center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Footer mit Links links und rechts */
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
}Die Stärke von Flexbox: Es verteilt verfügbaren Platz automatisch. Mit flex: 1 nimmt ein Element den gesamten verbleibenden Platz ein. Mit flex-wrap: wrap brechen Elemente in die nächste Zeile um, wenn der Platz nicht reicht.
CSS Grid: Zweidimensionale Layouts
Grid ist ideal für Layouts mit Zeilen UND Spalten gleichzeitig. Typische Anwendungsfälle: Seitenlayouts, Kartenraster, Dashboards, Bildergalerien.
/* Responsives Kartenraster */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
/* Klassisches Seitenlayout */
.page {
display: grid;
grid-template-columns: 250px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
/* Dashboard mit verschieden großen Kacheln */
.dashboard {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.dashboard .wide { grid-column: span 2; }
.dashboard .tall { grid-row: span 2; }Die Killer-Feature von Grid: repeat(auto-fit, minmax(280px, 1fr)). Diese eine Zeile erstellt ein vollständig responsives Raster — ohne Media Queries! Die Karten sind mindestens 280px breit und füllen den verfügbaren Platz gleichmäßig.
Die Entscheidungshilfe
Hier meine Faustregel, die sich in hunderten Projekten bewährt hat:
Nutze Flexbox wenn: Du Elemente in einer Reihe oder Spalte anordnest, du Elemente zentrieren willst, du den verfügbaren Platz zwischen Elementen verteilen willst, du eine Navigation oder Button-Gruppe baust.
Nutze Grid wenn: Du ein zweidimensionales Layout brauchst (Zeilen + Spalten), du ein Raster mit gleichmäßigen Karten brauchst, du Elemente über mehrere Zeilen/Spalten spannen willst, du ein komplexes Seitenlayout erstellst.
Kombiniere beide wenn: Das Seitenlayout mit Grid gebaut wird, aber die Inhalte innerhalb der Grid-Zellen mit Flexbox arrangiert werden. Das ist der häufigste Fall in der Praxis — Grid für die Makro-Struktur, Flexbox für die Mikro-Anordnung.
Praxisbeispiel: Responsive Kartenraster
Ein typisches Beispiel aus meinen Projekten — ein Raster aus Service-Karten, das sich automatisch anpasst:
/* Grid für das Raster */
.services {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
/* Flexbox für die Karten-Inhalte */
.service-card {
display: flex;
flex-direction: column;
padding: 2rem;
border-radius: 12px;
background: var(--color-surface);
}
/* Button am unteren Rand fixieren */
.service-card .cta {
margin-top: auto; /* Flexbox magic */
}Das Grid verteilt die Karten automatisch responsiv. Flexbox innerhalb jeder Karte sorgt dafür, dass der CTA-Button immer am unteren Rand sitzt — egal wie lang der Text darüber ist. margin-top: auto in einem Flex-Container schiebt das Element nach unten — ein Trick, den ich in fast jedem Projekt nutze.
Browser-Support 2026
Beide Systeme werden von allen modernen Browsern vollständig unterstützt — auch auf Mobilgeräten. Der globale Support liegt bei über 98 %. Es gibt keinen Grund mehr, Float-basierte Layouts zu verwenden. Wenn du noch float: left für Layouts nutzt, ist es Zeit für ein Update.
Mehr CSS-Tricks und Tools findest du in meinem Artikel über CSS-Tools für Designer oder nutze direkt meine kostenlosen Box-Shadow und Border-Radius Generatoren.
Passende Leistungen & Tools
