Grid básico: linhas, colunas e a unidade fr — CSS Grid

De uma dimensão a duas

Imagine que você está diagramando a capa de um jornal: manchete no topo, várias colunas de texto, uma foto que ocupa duas delas, o rodapé embaixo. Isso é montar um layout em 2D, e é justamente o que o Grid torna fácil.

O Flexbox distribui elementos ao longo de um eixo (uma linha ou uma coluna). O CSS Grid trabalha em duas dimensões ao mesmo tempo: linhas e colunas. É a ferramenta certa quando você quer alinhar conteúdo tanto na horizontal quanto na vertical, seja um painel de controle, uma galeria de fotos ou o layout de uma página inteira.

Ativar a grade

O layout vive no contêiner: assim que você lhe dá display: grid, seus filhos diretos se tornam grid items e são posicionados dentro da grade. O contêiner define a estrutura; os itens a ocupam.

.galeria {
  display: grid;
  grid-template-columns: 200px 200px 200px;  /* 3 colunas de 200px */
}

A unidade fr: frações do espaço livre

Medidas fixas (px) são rígidas: em uma tela estreita, elas transbordam. A unidade fr (fraction) distribui o espaço disponível em proporções, como fatiar uma pizza em pedaços. 1fr 1fr 1fr cria três colunas que dividem a largura igualmente e se adaptam ao tamanho do contêiner.

⚠️ PEGADINHA CLÁSSICA: 1fr não é "um terço fixo". É uma fração do que sobra. Se uma coluna tem conteúdo largo, o fr reparte o que resta depois disso, não o total. Por isso 1fr 1fr pode não terminar em duas colunas idênticas quando o conteúdo manda.

.galeria {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3 colunas iguais e flexíveis */
  grid-template-rows: 100px auto;      /* linha fixa + linha que cresce */
}

Você pode misturar unidades: grid-template-columns: 250px 1fr; deixa uma coluna fixa de 250px (uma sidebar) e outra que ocupa o resto.

Espaçamento entre células: gap

gap é o espaçamento entre células, sem ter que adicionar margin a cada item (as margens do Grid não colapsam e não sobram nas laterais):

.galeria {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;             /* 16px entre linhas e colunas */
}

Regra mental: o contêiner é o arquiteto que desenha a planta da grade (display, columns, rows, gap); os itens são os inquilinos que só decidem em qual vaga se instalam.