Skip to main content

Grid | CSS

  • Grid | CSS

CSS Grid — guia direto ao ponto

Uma folha de consulta curta, prática e pronta para copiar e colar.

1) Quando usar​

  • Grid = layout bidimensional (linhas + colunas).
  • Flex = uma dimensão (ou linha ou coluna).
  • Use Grid para páginas, dashboards, cards responsivos, layouts com cabeçalho/rodapé.

2) Começo rápido​

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colunas iguais */
  gap: 1rem; /* espaçamento entre células */
}
.item:nth-child(1) {
  grid-column: span 2; /* ocupa 2 colunas */
}

3) Conceitos essenciais​

  • Tracks: colunas/linhas definidas em grid-template-columns/rows.
  • fr: fração do espaço restante no contêiner.
  • Explícito vs. implícito: tracks declaradas vs. criadas automaticamente.
  • gap: espaçamento entre células (substitui grid-gap).
  • Conta “100% de quê?”: % em Grid é relativo ao contêiner no eixo correspondente.

4) Colunas/linhas na prática​

/* Colunas iguais */
.container { grid-template-columns: repeat(4, 1fr); }

/* Larguras mistas */
.container { grid-template-columns: 200px 1fr 2fr; }

/* Evitar estouro de conteúdo com fr */
.container { grid-template-columns: minmax(0, 1fr) 2fr; }

/* Responsivo automático: auto-fit vs auto-fill */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
/* auto-fit: “colapsa” espaços vazios; auto-fill: mantém trilhos fantasma */

Dica: minmax(0, 1fr) evita que conteúdo com largura mínima (“min-content”) impeça a coluna de encolher.

5) Posicionando itens​

.item { grid-column: 2 / 4;  /* da coluna 2 até antes da 4 */ }
.item { grid-column: span 2; /* ocupa 2 colunas a partir da atual */ }
.item { grid-row: 1 / span 2; }

/* Linhas nomeadas */
.layout {
  display: grid;
  grid-template-columns: [sidebar] 18rem [content] 1fr [end];
}
.sidebar { grid-column: sidebar; }
.main    { grid-column: content; }

6) Áreas nomeadas (template areas)​

.page {
  display: grid;
  grid-template:
    "header header" auto
    "aside  main"   1fr
    "footer footer" auto / 16rem 1fr;
  min-height: 100dvh; /* altura de tela, respeita UI móvel */
}
.header { grid-area: header; }
.aside  { grid-area: aside; }
.main   { grid-area: main; }
.footer { grid-area: footer; }

/* Reorganizar no mobile */
@media (max-width: 768px) {
  .page { grid-template:
    "header" auto
    "main"   1fr
    "aside"  auto
    "footer" auto / 1fr; }
}

7) Alinhamento​

  • Dentro da célula: justify-items (x), align-items (y), place-items (atalho).
  • Distribuição das tracks: justify-content (x), align-content (y), place-content.
  • Por item: justify-self, align-self, place-self.
.grid { place-items: center; }  /* centraliza conteúdo nas células */
.item { place-self: start end; }/* y: start, x: end */

8) Fluxo automático​

.grid { grid-auto-flow: row; }   /* padrão: preenche por linhas */
.grid { grid-auto-flow: column; }
.grid { grid-auto-flow: dense; } /* tenta “preencher buracos” */

/* Alturas/colunas implícitas */
.grid { grid-auto-rows: 12rem; }

9) Receitas rápidas​

Cards responsivos

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

Sidebar + conteúdo

.shell { display:grid; grid-template-columns: 18rem minmax(0,1fr); gap:1rem; }

Layout de página com rodapé colado (sticky footer)

.page { display:grid; min-height:100dvh; grid-template-rows: auto 1fr auto; }

Grade de 12 colunas (utilitário)

.grid-12 { display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap:.75rem; }
/* Ex.: ocupar 3 colunas */
.span-3 { grid-column: span 3; }

10) Subgrid (moderno)​

Permite que um item de grid herde as linhas/colunas do pai.

.parent { display:grid; grid-template-columns: 12rem 1fr; }
.child  { display:grid; grid-template-columns: subgrid; grid-column: 1 / -1; }

Use quando o conteúdo interno precisa alinhar exatamente às colunas do contêiner.

11) Boas práticas e armadilhas​

  • Prefira minmax(0, 1fr) em colunas com conteúdo potencialmente longo.
  • Combine Grid (macro) com Flex (micro) — ex.: grid para a página, flex para alinhar itens dentro das células.
  • auto-fit vs auto-fill: teste ambos; auto-fit costuma ser o desejado para “empacotar” cartões.
  • Use gap em vez de margin para espaçar células; evita cálculos de borda.
  • Para alturas por aspecto, hoje prefira aspect-ratio (em vez de hacks com padding%).
  • Depure com DevTools: ative o overlay de grid para ver linhas/áreas.

12) Checklist mental​

  1. Defina o contêiner: display:grid + gap.
  2. Escolha a malha: grid-template-columns (e rows se precisar).
  3. Pense em faixas fluidas: repeat(auto-fit, minmax(...)) e fr.
  4. Posicione exceções com grid-column/row ou áreas.
  5. Ajuste alinhamento (place-items/place-content).

13) Snippets prontos​

Mosaico de cards com 3–6 por linha

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

Três colunas com central dominante

.three { display:grid; gap:1rem;
  grid-template-columns: 16rem minmax(0,1fr) 20rem; }

Tabela responsiva estilo “cards” no mobile

.table { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 640px){
  .table { grid-template-columns: 1fr; }
}