CSS Grid

O que é CSS Grid?

CSS Grid é um sistema de layout bidimensional integrado ao CSS. Ele permite organizar elementos em linhas e colunas simultaneamente, oferecendo controle total sobre como os itens são posicionados, dimensionados e alinhados em uma página. Antes do Grid, os desenvolvedores dependiam de floats, tabelas ou gambiarras de posicionamento para criar layouts complexos. O Grid substituiu tudo isso por um mecanismo único e poderoso.

A principal diferença são as duas dimensões. O Flexbox organiza itens em uma única direção — uma linha ou uma coluna. O Grid organiza itens em ambas as direções ao mesmo tempo: você define colunas e linhas, e então posiciona os itens nas células resultantes. Isso o torna a escolha natural para layouts de página, grids de cards, dashboards e qualquer design onde os itens precisem estar em um plano bidimensional estruturado.

Container grid e itens grid

Para usar Grid, você define display: grid em um elemento pai. Esse pai torna-se o grid container, e seus filhos diretos tornam-se grid items.

/* style.css */
.container {
  display: grid;
}

Uma vez que o container é um grid, você define quantas colunas e linhas ele possui, qual a largura delas e como os itens são posicionados dentro delas. Itens que não são posicionados explicitamente são organizados automaticamente pelo algoritmo do grid, preenchendo as células vazias em ordem.

Grid template columns and rows

As propriedades mais fundamentais do Grid são grid-template-columns e grid-template-rows. Elas definem as tracks — as colunas e linhas — do seu grid.

/* style.css */
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  grid-template-rows: auto 1fr auto;
}

• 200px 1fr 2fr cria três colunas: uma coluna fixa de 200 pixels e duas colunas flexíveis que dividem o espaço restante em uma proporção de 1 para 2.
• auto 1fr auto cria três linhas: a primeira e a última se ajustam ao tamanho do conteúdo (shrink-wrap), enquanto a linha do meio se expande para preencher a altura disponível.

Você também pode usar o shorthand grid-template-columns para definir tudo em um só lugar:

/* style.css */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr;
  gap: 1rem;
}

A unidade fr

A unidade fr significa fração do espaço restante (fraction of remaining space). Ela distribui o espaço disponível proporcionalmente entre as tracks após a contabilização dos tamanhos fixos.

/* style.css */
.grid {
  grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
}

/* style.css */
.grid {
  grid-template-columns: 200px 1fr 2fr; /* fixed + two flexible columns */
}

No segundo exemplo, a primeira coluna ocupa 200 pixels, e o restante é dividido de forma que a terceira coluna receba o dobro do espaço da segunda. A unidade fr é a maneira mais comum de dimensionar tracks de Grid porque ela escala naturalmente com o container.

repeat(), auto-fill e auto-fit

Escrever o mesmo valor várias vezes é tedioso. A função repeat() permite que você repita um padrão de trilha (track):

/* style.css */
.grid {
  grid-template-columns: repeat(4, 1fr); /* four equal columns */
}

auto-fill e auto-fit vão além. Eles repetem um padrão de trilha quantas vezes for possível caber no container:

/* style.css */
.grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

• auto-fill cria tantas trilhas quantas couberem, mesmo que algumas permaneçam vazias.
• auto-fit colapsa as trilhas vazias, expandindo as restantes para preencher o espaço.

Na prática, eles se comportam de forma idêntica quando combinados com minmax(), então a escolha raramente faz diferença.

minmax()

minmax() define um intervalo de tamanho de trilha — um mínimo e um máximo:

minmax(200px, 1fr)

Isso significa que a trilha terá pelo menos 200 pixels de largura, mas pode crescer até 1fr do espaço restante. Combinado com auto-fill ou auto-fit, minmax() é o motor por trás de grids responsivos que se adaptam sem a necessidade de media queries.

Grid gap

A propriedade gap define o espaçamento entre os itens do grid:

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

Você pode definir os gaps de linha e coluna de forma independente:

/* style.css */
.grid {
  row-gap: 1rem;
  column-gap: 2rem;
}

O gap cria espaço apenas entre os itens, e não ao redor das bordas do container, o que torna o código mais limpo do que adicionar margens aos itens do grid.

Linhas de grade e células de grade

As linhas de grade são as linhas divisórias horizontais e verticais que definem a estrutura da grade. As colunas são numeradas da esquerda para a direita começando em 1, e as linhas de cima para baixo começando em 1. Os espaços entre as linhas são chamados de grid cells.

/* style.css */
.item {
  grid-column: 1 / 3; /* spans from line 1 to line 3 (two columns) */
  grid-row: 1 / 2;    /* spans from line 1 to line 2 (one row) */
}

As linhas também podem ser negativas: -1 refere-se à última linha. Compreender as linhas é essencial para o posicionamento preciso dos itens.

Posicionamento de itens no Grid

Você controla onde cada item fica utilizando as propriedades de posicionamento:

• grid-column — quais colunas o item ocupa.
• grid-row — quais linhas o item ocupa.
• grid-area — um atalho para row-start / column-start / row-end / column-end.

/* style.css */
.header {
  grid-column: 1 / -1; /* span all columns */
  grid-row: 1;
}

.sidebar {
  grid-column: 1;
  grid-row: 2 / 4;
}

.main {
  grid-column: 2 / -1;
  grid-row: 2 / 4;
}

Itens que não são posicionados explicitamente são posicionados automaticamente pelo algoritmo do grid, preenchendo as células da esquerda para a direita e de cima para baixo.

Áreas de grid nomeadas

grid-template-areas permite que você desenhe seu layout com strings, atribuindo um nome a cada região:

/* style.css */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  gap: 1rem;
}

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

Isso é extremamente legível. Você consegue visualizar a forma do layout diretamente no CSS, e reorganizar o design é tão simples quanto reescrever a string de template areas.

Alinhamento de Grid

O Grid oferece controles de alinhamento poderosos que funcionam tanto no container quanto em itens individuais.

Alinhamento no nível do container:

/* style.css */
.grid {
  justify-items: center;  /* align items horizontally within their cell */
  align-items: center;    /* align items vertically within their cell */
  justify-content: center; /* align the grid tracks within the container */
  align-content: center;   /* align the grid tracks vertically within the container */
}

Alinhamento no nível do item:

/* style.css */
.item {
  justify-self: end;
  align-self: start;
}

Essas propriedades utilizam os mesmos valores que o Flexbox — start, end, center, stretch e outros — portanto, a curva de aprendizado é suave se você já conhece o alinhamento do Flexbox.

Padrões comuns de CSS Grid

Layout Holy Grail:

/* style.css */
.page {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  min-height: 100vh;
}

Grid de cards responsivo:

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

Dashboard com sidebar fixa:

/* style.css */
.dashboard {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

.dashboard-header { grid-column: 1 / -1; }
.dashboard-nav    { grid-area: nav / 1 / -1 / 2; }
.dashboard-main   { grid-area: main / 2 / -1 / 3; }

Conteúdo full-bleed:

/* style.css */
.content {
  display: grid;
  grid-template-columns: 1fr min(65ch, 100%) 1fr;
}

.content > * {
  grid-column: 2; /* center text in the narrow column */
}

Grids responsivos sem media queries

Uma das maiores forças do Grid é a construção de layouts responsivos sem a necessidade de media queries. A combinação de auto-fit + minmax() resolve isso:

/* style.css */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

Conforme a viewport diminui, as colunas colapsam automaticamente. À medida que cresce, novas colunas aparecem. Sem a necessidade de breakpoints. Esse padrão funciona para grids de cards, galerias de imagens, campos de formulários e quase qualquer componente que precise se adaptar.

Para ter mais controle, você pode adicionar camadas de media queries por cima:

/* style.css */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

Quando usar Grid vs Flexbox

A resposta curta: Grid para duas dimensões, Flexbox para uma.

• Use Grid quando precisar de itens organizados em linhas e colunas — layouts de página, dashboards, galerias de imagens, grids de cards.
• Use Flexbox quando precisar alinhar ou distribuir itens ao longo de um único eixo — barras de navegação, layouts de formulários, centralização de conteúdo, espaçamento de itens em uma linha.

Na prática, a maioria dos projetos utiliza ambos. Uma página pode usar Grid para o layout geral e Flexbox para componentes individuais dentro dessas áreas do grid. Eles se complementam, não competem.

Melhores práticas

• Use grid-template-areas para layouts de página — isso torna o design legível e fácil de reorganizar.
• Prefira auto-fit + minmax() para grids de componentes responsivos em vez de escrever media queries para cada breakpoint.
• Use gap em vez de margens nos itens do grid — isso mantém o espaçamento consistente e evita lacunas nas bordas.
• Nomeie suas áreas de grid de forma significativa — header, sidebar, main — e não area1, area2.
• Combine Grid e Flexbox — Grid para o layout macro, Flexbox para alinhamentos micro dentro dos componentes.
• Evite o excesso de grids — se uma linha simples de Flexbox resolve o problema, não utilize Grid.

Erros comuns

• Usar grid para tudo quando o Flexbox seria mais simples.
• Esquecer que o gap substitui as margens — gerando espaçamento duplo entre os itens.
• Confundir auto-fill e auto-fit quando ambos se comportam da mesma forma com minmax().
• Não utilizar áreas de grid nomeadas, resultando em posicionamentos numéricos difíceis de manter.
• Supercomplicar layouts com muitos posicionamentos explícitos quando o posicionamento automático funciona bem.
• Presumir que o Grid serve apenas para layouts de página — ele também funciona para componentes.

Vale a pena aprender CSS Grid em 2026?

Com certeza. O CSS Grid agora possui suporte universal e se tornou a ferramenta padrão para layouts na web. Todos os principais frameworks — React, Vue, Svelte, Astro — renderizam HTML que é estilizado com CSS, e entender Grid significa que você pode construir qualquer layout sem precisar “brigar” com suas ferramentas. A era dos hacks de float e clearfixes acabou, e desenvolvedores que dominam Grid escrevem folhas de estilo mais limpas, sustentáveis e responsivas. Esteja você construindo uma landing page simples ou um dashboard complexo, o Grid oferece a precisão e a flexibilidade que nenhum outro método de layout em CSS consegue igualar.

Como aprender CSS Grid

Um caminho prático:

1. Aprenda display: grid, grid-template-columns e grid-template-rows.
2. Entenda a unidade fr e como ela distribui o espaço.
3. Pratique auto-fit + minmax() para grids responsivos.
4. Construa um layout “Holy Grail” com grid-template-areas.
5. Aprenda o posicionamento de itens com grid-column e grid-row.
6. Explore as propriedades de alinhamento: justify-items, align-items, justify-content, align-content.
7. Construa projetos reais — um dashboard, uma galeria de fotos, uma página de preços — até que o Grid pareça natural.

A partir daí, combine Grid com Flexbox e técnicas responsivas para criar layouts completos e prontos para produção. Nosso tutorial interativo de CSS guia você por cada etapa com exercícios práticos.