Eine Frage, die mir staendig in Foren und auf Discord begegnet: Soll ich Grid oder Flexbox nehmen? Die kurze Antwort — beides hat seinen Platz. Aber lass mich das mal aufschluesseln, weil ich frueher selbst ziemlich durcheinander war damit.
Das Grundprinzip ist eigentlich simpel
Flexbox arbeitet in einer Dimension. Entweder horizontal oder vertikal, aber nicht beides gleichzeitig. Klar, man kann flex-wrap nutzen und Elemente umbrechen lassen. Funktioniert auch. Aber man hat nie wirklich Kontrolle ueber beide Achsen gleichzeitig.
Grid dagegen — zwei Dimensionen. Zeilen UND Spalten. Man definiert ein Raster und platziert Elemente darin. Das klingt erstmal nach mehr Aufwand, ist es manchmal auch. Aber fuer bestimmte Layouts gibt es einfach keine bessere Loesung.
Wo Flexbox glaenzt
Navigation. Toolbars. Alles was in einer Reihe sitzt und sich den Platz aufteilen soll. Ein klassisches Beispiel:
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}Drei Zeilen CSS und die Navigation sieht auf jedem Bildschirm brauchbar aus. Versuch das mal mit Grid — geht auch, fuehlt sich aber an wie mit Kanonen auf Spatzen schiessen.
Auch Card-Layouts, bei denen die Karten einfach nebeneinander stehen und bei wenig Platz umbrechen, sind mit Flexbox schneller gebaut. flex-wrap: wrap und eine min-width auf die Kinder, fertig.
Wo Grid die Nase vorn hat
Sobald ein Layout komplexer wird. Sidebar plus Content plus Footer der sich ueber alles erstreckt? Grid. Eine Bildergalerie mit unterschiedlich grossen Elementen? Grid mit auto-fill und minmax().
.layout {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
gap: 1rem;
}Was mich am meisten ueberzeugt hat: grid-template-areas. Man benennt Bereiche und schiebt sie rum wie Bauteile. Das ist nah dran an visuellem Design, direkt im Code.
Der haeufigste Fehler
Leute versuchen komplette Seitenlayouts mit Flexbox zu bauen. Ja, es geht. Nein, es ist keine gute Idee. Man endet mit verschachtelten Flex-Containern, und spaetestens beim dritten Breakpoint verliert man den Ueberblick.
Andersrum: Fuer eine einfache Button-Gruppe Grid zu verwenden ist Overkill. Nicht falsch, aber unnoetig komplex.
Mein Workflow mittlerweile
Ich starte meistens mit der Frage: Brauche ich Kontrolle in zwei Richtungen? Wenn ja — Grid. Geht es nur darum, Elemente in einer Richtung zu verteilen? Flexbox.
Und ganz ehrlich, in der Praxis mische ich beide staendig. Das aeussere Layout mit Grid, einzelne Komponenten innen mit Flexbox. Die schliessen sich ueberhaupt nicht gegenseitig aus.
Wer sich unsicher ist: Einfach anfangen und bei Problemen umbauen. Ist beides CSS, der Browser beschwert sich nicht.