CSS Grid und Flexbox sind zwei Layout-Methoden in CSS, mit denen sich komplexe und flexible Designs fürs Web bauen lassen. Sie überschneiden sich stellenweise, haben aber jeweils eigene Fähigkeiten und eigene ideale Einsatzfälle. In diesem Vergleich CSS Grid vs. Flexbox gehen wir die Vor- und Nachteile beider durch und sehen, wann das eine dem anderen vorzuziehen ist.
Display Grid
Display Grid ist ein Layout-System für rasterbasierte Designs. Du definierst Zeilen und Spalten auf deiner Seite und platzierst Elemente innerhalb dieser Zeilen und Spalten. Damit lassen sich die Elemente deiner Seite einheitlich und strukturiert ausrichten und anordnen.
Hier ein HTML/CSS-Beispiel, das mit CSS Grid ein Raster aus 3 Spalten und 3 Zeilen erzeugt:
HTML-Code Grid
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>CSS-Code Grid
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 1rem;
border: 1px dashed #000;
padding: 5px;
}
.grid-item {
background: #e74c3c;
padding: .5rem;
color: white;
text-align: center;
}Display Flex
Flexbox ist ein Layout-System für flexible Layouts, die sich an unterschiedliche Bildschirm- und Containergrößen anpassen. Du legst relative Maße für die Elemente deines Layouts fest und richtest sie präzise aus.
Noch ein HTML/CSS-Beispiel, diesmal mit Flexbox zum Ausrichten:
HTML-Code Flex
<div class="flex-container">
<div class="flex-item">Logo</div>
<div class="flex-item">Menu</div>
<div class="flex-item">Champ de Recherche</div>
</div>CSS-Code Flex
.flex-container {
display: flex;
justify-content: center;
gap: 1rem;
border: 1px dashed #000;
padding: 5px;
}
.flex-item {
border: 1px dashed #e74c3c;
padding: 10px;
}Flex und Grid im Vergleich
CSS Grid vs. Flexbox: Hier ist dasselbe Markup, diesmal mit Grid. Der Unterschied bei der relativen Größe der Elemente spricht für sich.
HTML-Code Grid vs. Flex
<div class="grid-container">
<div class="grid-item">Logo</div>
<div class="grid-item">Menu</div>
<div class="grid-item">Champ de Recherche</div>
</div>Der große Abstand zwischen dem Beispiel und dem HTML-Code ist kein Fehler deines Browsers. Wir haben unserem Raster 3 Spalten und 3 Zeilen vorgegeben, und das Raster hält sich in jedem Fall an diese Struktur. Display Grid folgt der in CSS deklarierten Struktur buchstabengetreu, selbst wenn es gar kein Kindelement .grid-item gibt!
CSS Grid oder Flexbox: wann nimmst du was?
Wer die Stärken und Schwächen beider Werkzeuge kennt, wählt das passende für sein Projekt. Grob gesagt ist CSS Grid ideal für rasterbasierte Designs wie Portfolios und Bildergalerien, während Flexbox ideal für flexible, responsive Designs ist, etwa für Flex-Menüs und Toolbars.
Ein Beispiel macht es anschaulicher: Angenommen, du baust das Layout für die Startseite eines E-Commerce-Shops. Es muss Bilder hervorgehobener Produkte aufnehmen, dazu Bereiche für Produktkategorien, eine Navigationsleiste und ein Suchformular. In diesem Fall könntest du CSS Grid nehmen, um die Bilder der hervorgehobenen Produkte im Raster anzuordnen, und Flexbox, um die Kategoriebereiche, die Navigationsleiste und das Suchformular sauber auszurichten.
Wichtig zu wissen: Beide Werkzeuge lassen sich auch kombinieren, um noch anspruchsvollere Designs zu bauen. Du könntest etwa mit CSS Grid ein Raster aus Spalten und Zeilen anlegen und dann mit Flexbox die Elemente innerhalb jeder Zelle ausrichten. So verbindest du die Vorteile beider Werkzeuge zu Designs, die noch mächtiger und flexibler sind.
Kurz gesagt: CSS Grid ist das richtige Werkzeug für rasterbasierte Designs wie Portfolios und Bildergalerien, Flexbox das richtige für flexible, responsive Designs wie Flexbox-Menüs und Toolbars. Zusammen eingesetzt, kommst du zu noch fortgeschritteneren Designs, die zu den Anforderungen deines Projekts passen.
