Guia completo de CSS Grid em 2026

O CSS Grid transformou a forma como construímos páginas inteiras: em vez de simular colunas com floats ou flexbox aninhado, ganhamos um sistema nativo de duas dimensões — linhas e colunas ao mesmo tempo.

O básico: display: grid

Tudo começa declarando display: grid no container. A partir daí, os filhos diretos se tornam itens de grid e passam a respeitar as regras de grid-template-columns e grid-template-rows.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

A função repeat() evita repetir manualmente o mesmo valor várias vezes, e a unidade fr representa uma fração do espaço disponível — três colunas de 1fr dividem o espaço igualmente entre si.

Colunas de tamanhos diferentes

Nem sempre você quer colunas iguais. Uma barra lateral fixa ao lado de um conteúdo flexível é um padrão comum:

.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

Áreas nomeadas

Para estruturas mais complexas, grid-template-areas permite desenhar o layout como um mapa textual, o que deixa o CSS quase autodescritivo:

.pagina {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
}
.header { grid-area: header; }
.main   { grid-area: main; }
.sidebar{ grid-area: sidebar; }
.footer { grid-area: footer; }

Grid fluido sem media queries

Combinando repeat(auto-fit, minmax(...)) você cria grades que se reorganizam sozinhas conforme o espaço disponível, sem precisar declarar um breakpoint para cada tamanho de tela — a técnica que usamos na nossa ferramenta de Layout Responsivo.

Quando usar Grid em vez de Flexbox

Use Grid quando precisar controlar linhas e colunas simultaneamente — estruturas de página, dashboards, galerias. Use Flexbox quando o problema é essencialmente unidimensional — alinhar itens em uma barra de navegação, distribuir botões, centralizar um bloco.

Próximos passos

A melhor forma de internalizar Grid é experimentar: abra o nosso gerador de CSS Grid, ajuste colunas, gap e alinhamento, e observe como cada propriedade muda o resultado em tempo real.