Flex vs Grid: when to use each

TODO i18n: Full body translation pending. Title and description are localized; the body below remains in Portuguese for now.

Regra prática:

• Flexbox — alinhar e distribuir em um eixo (nav, botões, centralizar).
• Grid — estruturar a página ou um componente em linhas e colunas.

Você pode (e deve) combinar: grid no layout externo, flex nos miolos.

Compare:

• Centralizar com Flexbox
• Galeria com Grid
• Cards responsivos

Se está brigando com margin: auto em cascata, provavelmente é hora de Flex ou Grid.