Wer heute Layouts mit CSS baut, greift fast immer zu einem von zwei Werkzeugen: Flexbox oder CSS Grid. Beide haben die Zeiten von Float-Konstruktionen und Tabellen-Layouts abgelöst und sind aus modernem Webdesign nicht mehr wegzudenken. Doch genau weil sich ihre Einsatzgebiete überschneiden, taucht immer wieder dieselbe Frage auf: Nehme ich jetzt Flexbox oder Grid? Die kurze Antwort lautet, dass es keine Konkurrenz zwischen beiden gibt, sondern eine Arbeitsteilung. Dieser Ratgeber zeigt dir, worin sich die beiden Modelle grundlegend unterscheiden, welche Aufgabe zu welchem Werkzeug passt und warum du sie in der Praxis meist gemeinsam einsetzt.
Der entscheidende Unterschied: eine Dimension oder zwei
Der wichtigste Punkt, an dem sich alles andere aufhängt, ist die Dimensionalität. Flexbox ist ein eindimensionales Layout-System. Es ordnet Elemente entweder in einer Zeile oder in einer Spalte an und kümmert sich um die Verteilung entlang genau einer Achse. CSS Grid dagegen ist zweidimensional: Es verwaltet Zeilen und Spalten gleichzeitig und erlaubt dir, ein echtes Raster aus Reihen und Säulen zu definieren.
Praktisch heißt das: Sobald du nur eine Reihe von Elementen sauber verteilen oder ausrichten willst, ist Flexbox das natürliche Werkzeug. Sobald du ein Layout entwirfst, bei dem Inhalte sowohl horizontal als auch vertikal in ein festes Schema fallen sollen, spielt Grid seine Stärke aus. Die Faustregel, die sich viele merken: Geht es um Inhalte entlang einer Linie, nimm Flexbox. Geht es um ein Gitter, nimm Grid.
Wofür Flexbox gemacht ist
Flexbox glänzt überall dort, wo eine überschaubare Gruppe von Elementen flexibel auf den verfügbaren Platz reagieren soll. Es ist das ideale Werkzeug für Komponenten und kleinere Bausteine, nicht für das große Gesamtgerüst einer Seite.
- Navigationsleisten: Logo links, Menüpunkte rechts, alles vertikal mittig ausgerichtet.
- Buttongruppen und Toolbars: mehrere Schaltflächen mit gleichmäßigen Abständen nebeneinander.
- Karten-Innenleben: Titel, Text und ein nach unten gedrückter Button mit
margin-top:auto. - Zentrieren: ein einzelnes Element horizontal und vertikal mittig setzen ist mit Flexbox in drei Zeilen erledigt.
- Aufzählungen mit ungleichen Inhalten: Tags, Chips oder Badges, die je nach Textlänge unterschiedlich breit sind.
Der Charme von Flexbox liegt darin, dass es den verfügbaren Raum intelligent verteilt. Über flex-grow, flex-shrink und flex-basis bestimmst du, wie sich Elemente strecken oder schrumpfen, wenn sich die Breite des Containers ändert. Damit reagiert eine Komponente von selbst auf unterschiedliche Bildschirmgrößen, ohne dass du für jede Breite ein neues Raster definierst.
Wofür CSS Grid gemacht ist
Grid ist das Werkzeug der Wahl, wenn du ein Layout von oben herab planst. Du legst zuerst die Struktur fest, also wie viele Spalten und Reihen es gibt und wie breit beziehungsweise hoch sie sind, und platzierst dann die Inhalte gezielt in diesem Raster.
- Seitenraster: Header, Sidebar, Hauptbereich und Footer in einem klaren Schema, oft definiert über
grid-template-areas. - Kartengitter und Galerien: viele gleichartige Elemente, die sich automatisch in Reihen umbrechen, gern mit
repeat(auto-fit, minmax()). - Dashboard-Layouts: Kacheln unterschiedlicher Größe, die exakt über mehrere Spalten oder Reihen reichen sollen.
- Magazin- und Editorial-Layouts: komplexe Anordnungen, bei denen Elemente bewusst aus dem gleichmäßigen Raster ausbrechen.
Ein großer Vorteil von Grid ist, dass die Reihenfolge im HTML von der visuellen Platzierung entkoppelt werden kann. Du kannst Elemente mit grid-column und grid-row dorthin setzen, wo sie optisch passen, während die HTML-Struktur logisch und barrierearm bleibt. Mit benannten Bereichen lässt sich ein Layout fast wie eine kleine Zeichnung im CSS beschreiben, was die Wartung erleichtert.
Was beide gemeinsam haben
Trotz aller Unterschiede teilen sich Flexbox und Grid einige Konzepte, und das macht den Wechsel zwischen ihnen angenehm. Am wichtigsten ist die gap-Eigenschaft: Sie funktioniert in beiden Modellen und legt den Abstand zwischen den Elementen fest, ohne dass du mit Rändern hantieren oder Außenabstände am letzten Element zurücknehmen musst. Das war früher eine echte Schwachstelle von Flexbox und ist heute in allen aktuellen Browsern gelöst.
Auch die Ausrichtungseigenschaften aus dem Box-Alignment-Modul gelten für beide. justify-content, align-items und Verwandte verhalten sich nach denselben Grundprinzipien, wobei sie sich bei Flexbox auf die eine Achse und bei Grid auf beide Achsen beziehen. Wer das Ausrichten in einem Modell verstanden hat, findet sich im anderen schnell zurecht.
Die Entscheidungstabelle für typische Aufgaben
Die folgende Übersicht ordnet häufige Layout-Aufgaben dem jeweils passenden Werkzeug zu. Sie ersetzt kein Nachdenken, hilft aber, im Alltag schneller zur richtigen Entscheidung zu kommen.
| Layout-Aufgabe | Empfehlung | Warum |
|---|---|---|
| Navigationsleiste | Flexbox | Eine Reihe von Elementen, die entlang einer Achse verteilt und ausgerichtet werden. |
| Kartengitter / Galerie | Grid | Viele gleichartige Kacheln, die sauber in Spalten und Reihen umbrechen sollen. |
| Seitenraster (Header, Sidebar, Main, Footer) | Grid | Zweidimensionale Struktur, ideal über benannte Bereiche definierbar. |
| Element zentrieren | Flexbox | Schnellste Lösung für horizontale und vertikale Mitte mit minimalem Code. |
| Buttongruppe / Toolbar | Flexbox | Wenige Elemente in einer Linie mit gleichmäßigem Abstand. |
| Dashboard mit Kacheln verschiedener Größe | Grid | Elemente sollen exakt über mehrere Spalten und Reihen reichen. |
| Formularzeile (Label + Feld) | Flexbox | Einfache Anordnung in einer Reihe, flexibel in der Breite. |
Die beste Strategie: beide kombinieren
In echten Projekten ist die Frage Flexbox oder Grid selten ein Entweder-oder. Bewährt hat sich ein zweistufiges Vorgehen: Grid übernimmt das große Ganze, Flexbox kümmert sich um die Details innerhalb der Zellen. Du baust also mit Grid das Seitenraster oder das Kartengitter auf und nutzt dann Flexbox, um den Inhalt jeder einzelnen Zelle anzuordnen.
- Definiere mit Grid die übergeordnete Struktur, etwa drei Karten nebeneinander, die automatisch umbrechen.
- Mache jede Karte selbst zu einem Flex-Container in Spaltenrichtung.
- Lasse den Inhalt oben stehen und drücke den Button per
margin-top:autonach unten, sodass alle Buttons auf einer Höhe sitzen, egal wie lang der Text darüber ist.
So spielen beide Modelle genau ihre jeweilige Stärke aus, ohne sich gegenseitig in die Quere zu kommen. Diese Aufteilung ist heute der gängige Standard in den meisten Designsystemen und Komponentenbibliotheken.
Browserunterstützung und Praxis
Ein häufiges Bedenken war lange Zeit die Browserunterstützung, doch das ist inzwischen kein nennenswertes Thema mehr. Sowohl Flexbox als auch Grid werden von allen aktuellen Browsern durchgängig und zuverlässig unterstützt. Auch die gemeinsame gap-Eigenschaft funktioniert über alle gängigen Engines hinweg. Du kannst beide Verfahren heute ohne Vendor-Präfixe und ohne aufwendige Fallbacks produktiv einsetzen.
Wenn du Layouts schnell ausprobieren oder zwischenrechnen willst, etwa Spaltenbreiten, Prozentwerte oder Abstände, helfen kleine Hilfsprogramme. Auf kotsch.tech/webtools findest du eine Sammlung praktischer Werkzeuge für solche Alltagsaufgaben. Weitere Beiträge rund um Webdesign und Frontend sammeln wir in den News, und einen Überblick über alle Projekte gibt die Startseite.
Häufige Fragen
Ist Grid besser als Flexbox?
Nein, keines ist generell besser. Sie lösen unterschiedliche Probleme: Flexbox verteilt Elemente entlang einer Achse, Grid baut ein zweidimensionales Raster. In den meisten Projekten kommen beide nebeneinander zum Einsatz, jedes dort, wo es seine Stärken hat.
Kann ich Flexbox und Grid gemeinsam verwenden?
Ja, und genau das ist die empfohlene Praxis. Üblich ist, das Gesamtlayout mit Grid aufzubauen und innerhalb der einzelnen Zellen oder Karten Flexbox für die Feinanordnung der Inhalte zu nutzen.
Wie zentriere ich ein Element am einfachsten?
Mit Flexbox geht es am schnellsten: Setze den Container auf display:flex und kombiniere justify-content:center mit align-items:center. Damit sitzt das Kind horizontal und vertikal in der Mitte.
Funktioniert die gap-Eigenschaft in beiden Modellen?
Ja. gap legt in Flexbox wie in Grid den Abstand zwischen den Elementen fest und wird von allen aktuellen Browsern unterstützt. Damit entfällt das frühere Hantieren mit Außenabständen am letzten Element.
Sollte ich für ein Kartengitter Flexbox oder Grid nehmen?
Für ein echtes Gitter mit gleichmäßigen Reihen ist Grid die bessere Wahl, besonders mit repeat(auto-fit, minmax()) für automatischen Umbruch. Flexbox funktioniert auch, lässt aber die letzte Reihe oft ungleichmäßig wirken, wenn die Anzahl der Karten nicht aufgeht.
Muss ich mir noch Sorgen um die Browserunterstützung machen?
In der Regel nicht. Beide Layout-Modelle und die gemeinsame gap-Eigenschaft sind in allen modernen Browsern stabil verfügbar, sodass aufwendige Fallbacks im Normalfall nicht mehr nötig sind.