Quando usar grid vs flex
Uma dúvida constante de quem está aprendendo: se os dois fazem layout, qual escolher em cada situação?
Estudar esta lição interativa →Flexbox e Grid não competem, eles resolvem problemas diferentes, e um projeto real usa os dois, cada um onde faz mais sentido. A pergunta certa não é "qual é melhor", é "este layout precisa de um eixo ou de dois?".
Use Flexbox quando...
O layout é essencialmente uma linha ou uma coluna: uma navbar, uma linha de botões, uma lista de tags.
Use Grid quando...
O layout precisa de linhas E colunas controladas juntas: uma galeria de fotos, um painel com áreas nomeadas, o esqueleto geral da página.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Uma linha simples (Flexbox, 1 eixo) e uma grade 2D (Grid, linhas e colunas juntas): dois problemas diferentes, duas ferramentas diferentes.
Um exemplo real que junta os dois: uma página de e-commerce comum usa Grid para a galeria de produtos (linhas e colunas de cartões) e, dentro de cada cartão individual, usa Flexbox para alinhar a imagem, o preço e o botão "comprar" numa coluninha vertical. Nada impede um display: flex dentro de uma célula de display: grid.
Na dúvida, comece perguntando: "estou organizando itens numa fileira só, ou preciso de uma grade de verdade?". Fileira, Flexbox. Grade, Grid. Com a prática, essa escolha vira automática.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Ajuste o flex (justify-content) e o grid (número de colunas).