Noções de grid

grid-template-columns: repeat(3, 1fr) cria três colunas iguais numa linha só, e o navegador põe cada filho na próxima célula livre.

Linhas e colunas ao mesmo tempo

O grid, o módulo CSS Grid Layout, foi feito para layout em duas dimensões: linhas e colunas juntas. Você desenha a grade no contêiner e os itens caem nas células dela. Enquanto o flexbox parte dos itens e deixa que eles resolvam os tamanhos, o grid parte do layout e encaixa os itens nele. Isso faz dele a ferramenta natural para galerias de fotos, listas de cartões e a forma geral de uma página com cabeçalho, barra lateral, conteúdo principal e rodapé.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* three equal columns */
  gap: 10px;
}
.gallery .wide { grid-column: span 2; }    /* this item covers two columns */

Trilhas e a unidade fr

grid-template-columns lista a largura de cada coluna, chamada de trilha (track). Você pode usar qualquer comprimento, como 200px 1fr, mas o grid acrescenta uma unidade própria: fr, uma fração do espaço livre. 1fr 1fr 1fr cria três colunas iguais; 2fr 1fr deixa a primeira coluna com o dobro da largura da segunda. A unidade fr reparte só o espaço que sobra depois das trilhas fixas e dos gaps, então 200px 1fr dá uma barra lateral de 200 pixels e deixa a coluna principal ficar com o resto. repeat(3, 1fr) é um jeito mais curto de escrever 1fr 1fr 1fr. grid-template-rows faz o mesmo para as linhas, mas muitas vezes você deixa as linhas em paz e elas ficam da altura do conteúdo.

Posicionando itens

Por padrão, os itens preenchem a grade na ordem do código, uma célula cada, da esquerda para a direita e depois na linha seguinte. Para aumentar um item, grid-column: span 2 faz ele cobrir duas colunas, e grid-row: span 2 duas linhas. As linhas entre as trilhas são numeradas a partir de 1, então uma grade de três colunas tem as linhas de 1 a 4, e grid-column: 1 / 3 quer dizer da linha 1 à linha 3. grid-column: 1 / -1 estica um item pela largura toda, porque números negativos contam a partir do fim.

Dando nome às áreas

Para o layout de uma página, grid-template-areas deixa você desenhar o layout com palavras. Cada string entre aspas é uma linha e cada palavra é uma célula; repetir uma palavra faz uma área se estender por essas células. Depois cada item recebe grid-area com o nome correspondente. O layout abaixo parece quase um rascunho: o cabeçalho em cima, uma barra lateral e o conteúdo principal lado a lado, e o rodapé embaixo. Mudar o layout para o celular é só reescrever essas poucas strings, muitas vezes dentro de uma media query.

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "head head"
    "side main"
    "foot foot";
  gap: 16px;
}
header { grid-area: head; }
aside  { grid-area: side; }
main   { grid-area: main; }
footer { grid-area: foot; }

Colunas que se ajustam à tela

Vale decorar um padrão dos guias de grid do MDN: grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)). minmax(150px, 1fr) diz que cada coluna precisa ter pelo menos 150 pixels e pode crescer para dividir o espaço, e auto-fill cria tantas colunas quanto couberem. O resultado é uma galeria que mostra duas colunas no celular e cinco ou seis numa tela larga, de novo sem media query. Como no flexbox, o grid pode pôr os itens numa ordem diferente da do HTML, e vale o mesmo cuidado: mantenha a ordem de leitura e a ordem visual iguais.