Wann greifst du zu CSS Grid statt zu Flexbox, und wann ist Flexbox weiterhin die richtige Wahl?

Nimm Grid, wenn du Inhalte in ein Layout setzt, das du in zwei Dimensionen definiert hast, etwa ein Seitengerüst oder ein Card-Grid mit ausgerichteten Zeilen und Spalten. Nimm Flexbox, wenn sich eine einzelne Zeile oder Spalte von Items nach ihrem eigenen Inhalt verteilen soll, etwa eine Toolbar oder eine Button-Gruppe. Grid ist layout-first, Flexbox ist content-first, und die beiden lassen sich problemlos ineinander verschachteln.

Meine Regel ist: Grid ist für den Fall, dass ich die Form des Layouts schon kenne und Dinge hineinsetze, und Flexbox ist für den Fall, dass die Items ihre eigenen Größen entlang einer Achse aushandeln sollen. Ein Seitengerüst mit Sidebar und Content-Spalte, oder ein Card-Grid, in dem die Zeilen fluchten müssen, das ist Grid. Eine Toolbar, ein Satz Filter-Chips, eine Button-Reihe mit etwas ganz am Rand, das ist Flexbox mit margin auto oder space-between. Sie verschachteln sich gut, die meisten meiner Komponenten sind außen ein Grid und innerhalb jeder Zelle flex. Was ich ständig nutze, ist repeat mit auto-fit und minmax, weil ich damit ein responsives Card-Grid ganz ohne Media Queries bekomme: die Spalten fließen einfach um, sobald der Container schmal wird. Subgrid ist die andere Sache, die man kennen sollte, weil damit die Innereien von Cards über das ganze Grid hinweg fluchten und nicht nur innerhalb jeder Card.