¿Cuándo recurres a CSS grid en vez de a flexbox, y cuándo sigue siendo flexbox la opción correcta?

Usa grid cuando estás colocando contenido dentro de un layout que has definido en dos dimensiones, como el armazón de una página o una rejilla de tarjetas con filas y columnas alineadas. Usa flexbox cuando una única fila o columna de elementos debe repartirse según su propio contenido, como una barra de herramientas o un grupo de botones. Grid parte del layout, flexbox parte del contenido, y se anidan sin problema uno dentro del otro.

Mi regla es que grid es para cuando ya conozco la forma del layout y estoy colocando cosas dentro, y flexbox es para cuando los elementos deben resolver sus propios tamaños a lo largo de un eje. Así que el armazón de una página con una barra lateral y una columna de contenido, o una rejilla de tarjetas donde las filas tienen que alinearse, eso es grid. Una barra de herramientas, un conjunto de chips de filtro, una fila de botones con algo empujado al extremo, eso es flexbox con un margin auto o space between. Se anidan bien, así que la mayoría de mis componentes son un grid en el nivel exterior y flex dentro de cada celda. Lo que uso constantemente es repeat con auto fit y minmax, porque me da una rejilla de tarjetas responsiva sin una sola media query: las columnas simplemente se reacomodan cuando el contenedor se estrecha. Subgrid es la otra que merece la pena conocer, ya que permite que el interior de las tarjetas se alinee a lo largo de toda la rejilla y no solo dentro de cada tarjeta.