Quando você usa CSS grid em vez de flexbox, e quando flexbox ainda é a escolha certa?

Use grid quando você está posicionando conteúdo num layout que você definiu em duas dimensões, como a estrutura de uma página ou um grid de cards com linhas e colunas alinhadas. Use flexbox quando uma única linha ou coluna de itens deve se distribuir pelo próprio conteúdo, como uma barra de ferramentas ou um grupo de botões. Grid é layout primeiro, flexbox é conteúdo primeiro, e eles se aninham numa boa.

Minha regra é que grid serve para quando eu já conheço o formato do layout e estou posicionando coisas nele, e flexbox serve para quando os itens devem resolver os próprios tamanhos ao longo de um eixo. Então a estrutura de uma página com sidebar e coluna de conteúdo, ou um grid de cards em que as linhas precisam se alinhar, isso é grid. Uma barra de ferramentas, um conjunto de chips de filtro, uma linha de botões com algo empurrado para a ponta, isso é flexbox com margin auto ou space between. Eles se aninham bem, então a maioria dos meus componentes é um grid no nível externo e flex dentro de cada célula. O que eu uso o tempo todo é repeat com auto fit e minmax, porque me dá um grid de cards responsivo sem nenhuma media query: as colunas simplesmente se reorganizam quando o container fica estreito. Subgrid é o outro que vale conhecer, já que permite que os internos dos cards se alinhem em todo o grid e não só dentro de cada card.