CSS Grid: Construa Qualquer Layout em Minutos

CSS Grid: Poder de Layout Bidimensional

Enquanto Flexbox lida com uma dimensão (linha ou coluna), Grid lida com ambas simultaneamente. É a ferramenta certa para layouts de página, dashboards, galerias de imagens e qualquer coisa com linhas E colunas.

Grid Básico

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;  /* 3 colunas */
  grid-template-rows: auto 1fr auto;     /* 3 linhas */
  gap: 16px;
}

A Unidade fr

fr significa "fração do espaço restante":

grid-template-columns: 1fr 1fr 1fr;        /* 3 colunas iguais */
grid-template-columns: 1fr 2fr 1fr;        /* meio é 2x maior */
grid-template-columns: 250px 1fr;          /* sidebar fixa + main fluido */
grid-template-columns: repeat(4, 1fr);     /* 4 colunas iguais */

Template Areas (Regiões Nomeadas)

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

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

Auto-Fit e Minmax (Responsivo Sem Media Queries)

/* Cards que auto-quebram: mín 300px, crescem para preencher */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
/* 1 card por linha no mobile, 2 no tablet, 3+ no desktop — sem breakpoints! */

Posicionando Itens

.item {
  grid-column: 1 / 3;        /* da col 1 até col 3 */
  grid-column: span 2;       /* ocupa 2 colunas */
  grid-column: 1 / -1;       /* ocupa todas as colunas */
  grid-row: 1 / 3;           /* ocupa linhas 1-2 */
}

Padrões Comuns

/* Layout dashboard */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "nav header"
    "nav main";
  height: 100vh;
}

/* Galeria com imagem destaque */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.gallery .featured {
  grid-column: span 2;
  grid-row: span 2;
}

Grid vs Flexbox: Quando Usar Qual

Na prática, use ambos: Grid para layout da página, Flexbox para componentes dentro de cada célula.

Referência CSS: Cheatsheet CSS — Grid, Flexbox e todas as propriedades CSS pesquisáveis.