Flexbox vs Grid: Como Escolher (Com Exemplos Práticos)

Depois que você pega o jeito do CSS básico, vai esbarrar em duas ferramentas de layout que parecem resolver o mesmo problema: Flexbox e Grid. As duas permitem organizar elementos sem os hacks antigos (floats, display: table, posicionamento absoluto em tudo). Então qual usar?

Resposta curta: depende se você está organizando as coisas em uma direção ou em duas.

A regra de uma linha

• Flexbox é unidimensional. Ele organiza itens numa única linha ou numa única coluna, e é ótimo para decidir como esses itens devem dividir o espaço disponível.
• Grid é bidimensional. Ele organiza itens em linhas e colunas ao mesmo tempo, e é ótimo quando o alinhamento nos dois eixos realmente importa.

Se você está imaginando uma única linha de botões, uma barra de navegação, ou uma lista de cards que quebram para uma nova linha — isso é território do Flexbox. Se você está imaginando um layout de página completo com cabeçalho, barra lateral, conteúdo principal e rodapé — isso é território do Grid.

Flexbox na prática

O Flexbox brilha quando você tem uma linha (ou coluna) de itens e quer controlar o espaçamento e alinhamento nesse único eixo:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

justify-content controla o espaçamento no eixo principal (horizontal, por padrão). align-items controla o alinhamento no eixo transversal (vertical, por padrão). Esse trecho — três propriedades — substitui o que antes exigia uma pilha de floats e clearfixes.

O Flexbox também é a ferramenta certa quando os itens precisam crescer ou encolher para preencher o espaço:

.card {
  flex: 1; /* cada .card cresce para dividir a linha igualmente */
}

Grid na prática

O Grid brilha quando você está definindo uma estrutura de verdade — linhas e colunas nas quais posicionar as coisas diretamente:

.page-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
  min-height: 100vh;
}

.sidebar { grid-area: sidebar; }
.header  { grid-area: header; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Esse bloco grid-template-areas quase parece um diagrama da página — e esse é exatamente o objetivo. Você está descrevendo a forma do layout, em vez de brigar para alinhar as coisas peça por peça.

O Grid também torna trivial criar grades de cards responsivas, sem uma única media query:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

Isso cria quantas colunas de largura igual couberem, cada uma com no mínimo 200px, e reorganiza automaticamente conforme a tela encolhe.

Lado a lado

Você não precisa escolher só um

Em projetos reais, Flexbox e Grid trabalham juntos o tempo todo: o Grid define a estrutura geral da página, e o Flexbox cuida do alinhamento dentro de cada área do grid — como centralizar um botão dentro de um cabeçalho, ou espaçar ícones no rodapé de um card. Nenhum dos dois "vence" — eles resolvem problemas de formatos diferentes, e a maioria das páginas precisa dos dois.

O jeito mais rápido de desenvolver essa intuição é se perguntar, antes de escrever qualquer CSS: "Estou organizando uma linha, ou uma grade?" A resposta diz qual ferramenta usar.