Grid

Grid é o layout grid do Figma virado ferramenta de posicionamento. Em vez de só desenhar guias na tela, você define colunas e linhas e os elementos ocupam células.

A diferença prática pro flexbox: flexbox pensa em uma direção por vez, grid pensa nas duas ao mesmo tempo. Card com imagem em cima, título no meio e botão embaixo alinhado com os cards vizinhos é caso de grid.

.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

1fr significa "uma fração do espaço livre". Três colunas de 1fr dividem a largura em três partes iguais, e continuam iguais quando a tela muda de tamanho.

O truque que economiza media query

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

Isso quer dizer: encaixe quantas colunas couberem, cada uma com no mínimo 240px. A galeria vira uma, duas, três ou quatro colunas sozinha, sem você escrever nenhum breakpoint.