Flexbox oder Grid?

Jetzt kennst du zwei Arten, Elemente anzuordnen. Wann nimmst du welche?

• Flexbox ordnet Elemente in einer Richtung an: in einer Zeile oder in einer Spalte. Die Größen ergeben sich aus dem Inhalt: Jedes Item nimmt so viel Platz, wie es braucht, und der freie Platz lässt sich mit justify-content oder flex: 1 verteilen. Ideal für eine Reihe von Links oder Knöpfen oder für eine Überschrift mit einem Link daneben.
• Grid ordnet Elemente in zwei Richtungen gleichzeitig an: in Zeilen und Spalten. Die Struktur ergibt sich aus dem Container: Zuerst zeichnen wir die Spalten oder die Bereiche und setzen dann die Items hinein. Ideal für Galerien, Karten und das Layout einer ganzen Seite.

Die Karten ließen sich auch mit Flexbox und flex-wrap anordnen. Aber jede Zeile eines Flex-Containers wird für sich angeordnet: Wachsen die Karten mit flex-grow: 1, werden die Karten in einer kürzeren letzten Zeile breiter als die darüber. In einem Grid bleibt jede Karte in ihrer Spalte.

Oft werden beide kombiniert: Grid für das Layout der Seite, Flexbox für die kleineren Teile darin. Ein Grid-Item kann gleichzeitig ein Flex-Container sein und umgekehrt.

Unser Fußbereich ist ein gutes Beispiel. Er ist ein Grid-Item (er liegt im Bereich fuss), und darin stehen zwei Elemente, die nebeneinander stehen sollen: die Quelle und ein Link zurück nach oben. Das ist eine Richtung, also ein Fall für Flexbox.