Voltar ao blog
Capa do artigo: CSS Grid Layout: Guia Prático com Exemplos Responsivos

CSS Grid Layout: Guia Prático com Exemplos Responsivos

Por Mattos Tech Solutions5 min de leitura

Aprenda CSS Grid com colunas, linhas, gap, minmax, auto-fit, áreas, alinhamento e exemplos responsivos, mantendo semântica e acessibilidade.

CSS Grid é um sistema de layout bidimensional: ele organiza elementos em linhas e colunas e permite controlar tamanho, espaço e posicionamento. É especialmente útil para grades de cartões, áreas de página e componentes em que os eixos horizontal e vertical se relacionam.

Grid não substitui Flexbox. Grid costuma resolver a estrutura bidimensional; Flexbox funciona bem para distribuição em uma linha ou coluna. Ambos podem ser usados na mesma interface.

Conceitos básicos

Um elemento se torna contêiner de grid com display: grid. Seus filhos diretos viram itens do grid. As linhas que dividem a grade definem faixas, e o espaço entre linhas pode ser configurado com gap.

Um exemplo simples de três colunas iguais:

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

A unidade fr distribui o espaço disponível. Nesse caso, cada coluna recebe uma fração igual depois que gaps e outros tamanhos são considerados.

Uma grade responsiva sem vários breakpoints

Para cartões que devem criar quantas colunas couberem, combine repeat, auto-fit e minmax:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

Cada coluna tenta manter pelo menos 16rem, mas min(100%, 16rem) evita transbordamento quando o contêiner é ainda menor. auto-fit ocupa as faixas disponíveis e permite que as existentes se expandam.

auto-fill mantém faixas vazias possíveis; auto-fit tende a recolhê-las. A diferença aparece quando existe espaço para mais colunas do que itens.

Colunas com conteúdo e lateral

Uma área principal e uma lateral não precisam de percentuais rígidos:

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem);
  gap: 2rem;
}

@media (max-width: 48rem) {
  .layout {
    grid-template-columns: 1fr;
  }
}

minmax(0, 1fr) permite que conteúdo longo encolha dentro da coluna em vez de forçar transbordamento. O breakpoint deve ser ajustado quando o conteúdo deixa de caber, não por um aparelho específico.

Posicionamento por linhas

Itens podem ocupar faixas usando números ou nomes de linhas:

.destaque {
  grid-column: 1 / -1;
}

O valor -1 representa a última linha explícita, então o item atravessa todas as colunas definidas. Para layouts complexos, linhas nomeadas tornam a intenção mais legível.

Grid template areas

Áreas nomeadas ajudam a visualizar regiões:

.pagina {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  grid-template-areas:
    "cabecalho cabecalho"
    "lateral conteudo"
    "rodape rodape";
}

header { grid-area: cabecalho; }
aside { grid-area: lateral; }
main { grid-area: conteudo; }
footer { grid-area: rodape; }

Em tela menor, as áreas podem ser reorganizadas. Cuidado: alterar apenas a ordem visual não muda necessariamente a sequência do documento para teclado e leitores de tela. Mantenha a ordem do HTML lógica e evite rearranjos que contradigam leitura e foco.

Alinhamento

justify-items e align-items alinham itens dentro de suas áreas. justify-content e align-content distribuem a grade inteira quando existe espaço extra no contêiner.

place-items é uma abreviação para alinhamento nos dois eixos:

.centro {
  display: grid;
  place-items: center;
}

Centralizar é conveniente, mas não aplique altura fixa apenas para obter o efeito; conteúdo ampliado precisa continuar cabendo.

Grid implícito

Quando há mais itens do que posições explícitas, o navegador cria faixas implícitas. Controle seu tamanho com grid-auto-rows ou grid-auto-columns.

.galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(8rem, auto);
}

Entender a grade implícita ajuda a explicar itens que aparecem em linhas não declaradas.

Subgrid

subgrid permite que uma grade aninhada use as faixas definidas pelo pai. Isso é útil para alinhar títulos, textos e ações entre cartões sem impor alturas fixas.

Verifique suporte compatível com o público do projeto e forneça uma apresentação aceitável quando o recurso não estiver disponível nos navegadores suportados.

Grid ou Flexbox?

Use Grid quando linhas e colunas precisam trabalhar juntas ou quando o layout define regiões. Use Flexbox quando o fluxo principal é uma dimensão e o tamanho do conteúdo deve orientar a distribuição.

Exemplos comuns:

  • Grid para o conjunto de cartões; Flexbox dentro de cada cartão;
  • Grid para conteúdo e lateral; Flexbox para a navegação;
  • Grid para galeria; Flexbox para grupo de botões.

Escolha pelo relacionamento visual, não por preferência.

Erros frequentes

Larguras mínimas que transbordam

minmax(20rem, 1fr) pode exceder um contêiner menor que 20rem. Limite o mínimo ao espaço disponível ou use um breakpoint.

Alturas iguais forçadas

Definir altura fixa corta conteúdo com texto longo, tradução ou zoom. Deixe a faixa crescer e use alinhamento para posicionar ações.

Ordem visual diferente do documento

grid-row, grid-column e order podem criar uma sequência visual que não acompanha foco e leitura. Priorize HTML com ordem significativa.

Colunas demais

Uma grade que tecnicamente cabe pode tornar cartões estreitos e difíceis de ler. O tamanho mínimo deve vir do conteúdo.

Exemplo acessível de cartões

Use uma lista quando o conteúdo representa uma coleção:

<ul class="cards">
  <li class="card">
    <h2>Integração de sistemas</h2>
    <p>Conecte dados e processos com contratos claros.</p>
    <a href="/integracao-sistemas">Conheça a integração de sistemas</a>
  </li>
</ul>

O CSS define a apresentação; a semântica continua informando a relação entre os itens. Links precisam descrever o destino e foco visível não deve ser removido.

Para uma abordagem mais ampla de telas e interação, veja o guia de design responsivo.

Checklist de depuração

  1. Ative o inspetor de Grid do navegador.
  2. Visualize linhas explícitas e implícitas.
  3. Verifique tamanhos mínimos do conteúdo.
  4. Teste textos longos e zoom.
  5. Reduza o contêiner, não apenas o viewport.
  6. Navegue por teclado e confira a ordem de foco.
  7. Teste estados com poucos e muitos itens.

Conclusão

CSS Grid expressa layouts complexos com poucas regras quando a estrutura é compreendida. Comece por colunas e gap, evolua para minmax e áreas e preserve sempre a ordem semântica do documento.

Fontes e referências