CSS Grid e Flexbox na prática: quando usar cada um

Grid e Flexbox não competem — complementam. Flexbox resolve layout unidimensional (linha ou coluna). Grid resolve layout bidimensional (linhas e colunas ao mesmo tempo). Na prática, 90% dos sites modernos usam Grid para o esqueleto da página e Flexbox para alinhar itens dentro de cada célula. Este artigo traz código real, padrões de projeto e a tabela decisiva para parar de sofrer com CSS.

Comparação direta

Flexbox: o canivete suíço de componentes

Flexbox foi projetado para distribuir espaço entre itens em um único eixo. O container define o eixo principal (flex-direction: row ou column) e os itens respondem com flex-grow, flex-shrink e flex-basis.

Padrão: navbar com espaço entre marca e links

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

.navbar .links {
  display: flex;
  gap: 1rem;
  list-style: none;
}

Padrão: card com footer alinhado ao final

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card .content {
  flex: 1 1 auto; /* ocupa o espaço restante */
}

.card .footer {
  flex: 0 0 auto; /* mantém tamanho natural */
}

A propriedade flex é o atalho para flex-grow, flex-shrink e flex-basis, nessa ordem. flex: 1 1 auto significa: cresça se houver espaço, encolha se necessário, base inicial é o tamanho do conteúdo. Para botões de mesmo tamanho independente do texto, use flex: 1 1 0 (ou flex: 1).

Propriedades que confundem: justify-content vs align-items

• justify-content alinha no eixo principal (row = horizontal, column = vertical).
• align-items alinha no eixo transversal (row = vertical, column = horizontal).
• Quando flex-direction muda para column, justify-content passa a controlar a vertical e align-items a horizontal — o que muitos devs esquecem.

Grid: layout de página sem media queries

Grid permite definir trilhas (tracks) explícitas e posicionar itens em células nomeadas. A unidade fr distribui espaço restante proporcionalmente. A função minmax() impede que colunas fiquem menores que um limite, criando responsividade intrínseca.

Padrão: layout clássico de aplicação (header, sidebar, main, footer)

.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
  gap: 0;
}

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

Padrão: galeria responsiva sem media queries

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

auto-fit expande as colunas para preencher a linha; se sobrar espaço, divide entre as existentes. minmax(280px, 1fr) garante que cada item tenha no mínimo 280px de largura. Quando a tela diminui, o navegador automaticamente quebra para menos colunas — sem escrever @media.

Subgrid (navegadores modernos, 2023+)

Subgrid permite que um item Grid filho herde as trilhas do pai. Útil quando cards precisam alinhar títulos, descrições e botões entre si mesmo com conteúdos de tamanhos diferentes. Suporte: Firefox desde 2019, Chrome/Edge 117+ (2023), Safari 16+ (2022).

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* herda 3 trilhas do pai */
  gap: 0.5rem;
}

Quando usar Grid, quando usar Flexbox

• Use Flexbox quando o layout é linear: botões em linha, tags, itens de menu, alinhar ícone + texto, centralizar um modal na tela.
• Use Grid quando o layout tem linhas e colunas interdependentes: dashboard com cards, galeria de imagens, formulário com labels e inputs alinhados em grade.
• Combine os dois: Grid define a estrutura macro da página; Flexbox alinha elementos dentro de cada célula (header, card, sidebar item).
• Evite usar Flexbox para layouts de página inteira com wrap — o algoritmo de quebra de linha do Flexbox é menos previsível que o Grid para 2D.

Container Queries: o próximo passo

Media queries olham o viewport. Container queries olham o tamanho do elemento pai. Isso permite que um componente reaja ao espaço disponível onde ele foi inserido, independente da tela. Suporte: todos os navegadores modernos desde 2023 (Chrome 105+, Safari 16+, Firefox 110+).

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card { display: flex; gap: 1rem; }
  .card .media { flex: 0 0 120px; }
}

Container queries funcionam especialmente bem com Grid: o pai define a estrutura e o container, o filho se adapta ao espaço que recebeu.

Perguntas frequentes

Fontes consultadas

• CSS Grid Layout — MDN Web Docs
• CSS Flexible Box Layout — MDN Web Docs
• Grid by Example — Rachel Andrew
• A Complete Guide to Flexbox — CSS-Tricks
• A Complete Guide to CSS Grid — CSS-Tricks
• Can I use — CSS Subgrid