Como funciona o CSS Grid
Três linhas onde tudo começa
display: grid ativa a grelha, grid-template-columns descreve as colunas, grid-template-rows as linhas. Depois, os itens lá dentro preenchem as células sozinhos, por ordem, da esquerda para a direita. Não é preciso definir nada extra nos filhos.
1fr é uma parte, não uma largura
1fr significa "uma parte do espaço livre". Três colunas de 1fr dividem o contentor em três partes iguais, e os intervalos são retirados primeiro desse espaço – é por isso que a grelha não transborda, ao contrário de um layout em percentagens.
repeat() só encurta a linha
repeat(3, 1fr) é o mesmo que 1fr 1fr 1fr. Torna-se útil quando há doze colunas ou quando uma palavra-chave ocupa o lugar do número.
auto-fit e auto-fill
Ambos dizem ao navegador: "calcule sozinho as colunas, para caberem na largura do contentor". Juntamente com minmax(240px, 1fr), isto dá uma grelha responsiva sem media query nenhuma: uma coluna nunca fica mais estreita do que 240 píxeis, e a largura decide quantas cabem.
Há uma diferença. Quando não há colunas suficientes para encher uma linha, auto-fit estica as existentes por todo o espaço, enquanto auto-fill deixa faixas vazias e as colunas ficam estreitas. Para cartões, costuma escolher-se auto-fit.
gap lê-se a partir das linhas
gap: 16px 24px significa 16 entre linhas e 24 entre colunas, por esta ordem. Se os números forem iguais, escreva um só. Nunca há intervalo nas margens exteriores da grelha.
Perguntas frequentes sobre CSS Grid
Grid ou Flexbox?
Grid – quando descreve o layout em duas direções ao mesmo tempo: linhas e colunas. Flexbox – quando os itens ficam numa linha ou numa coluna e repartem o espaço entre si. Uma galeria de cartões é grid, uma barra de botões é flex.
Quantas linhas preciso de descrever?
Normalmente nenhuma. Se houver mais itens do que células, o navegador acrescenta linhas sozinho. grid-template-rows é necessário quando as linhas têm de ter uma altura definida.
Porque é que as colunas transbordam do contentor?
A causa mais comum é um texto longo ou uma imagem que não encolhe. 1fr significa "pelo menos o tamanho do conteúdo", por isso um conteúdo largo empurra a coluna. A solução é minmax(0, 1fr) em vez de 1fr.
Preciso de media queries?
Para uma grelha de cartões, não. repeat(auto-fit, minmax(240px, 1fr)) já reorganiza as colunas para qualquer largura. Uma media query continua útil quando o telemóvel precisa de outro layout, e não apenas de menos colunas.
Como faço um cartão ocupar duas colunas?
Acrescente-lhe grid-column: span 2. A grelha está preparada para isso, e os outros cartões reorganizam-se. Esta página cria o contentor; as regras para células individuais acrescentam-se à mão.