Responsivo sem media queries: auto-fit e minmax — CSS Grid

repeat(): não se repita

Escrever 1fr 1fr 1fr 1fr é tedioso. repeat() abrevia isso:

.galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* equivale a 1fr 1fr 1fr 1fr */
  gap: 16px;
}

minmax(): um mínimo e um máximo

minmax(min, max) define o tamanho de uma faixa com um piso e um teto. minmax(200px, 1fr) significa: "nunca mais estreita que 200px, mas cresce para distribuir o espaço que sobra".

grid-template-columns: minmax(200px, 1fr) 2fr;

O padrão estrela: cartões que se reorganizam sozinhos

Combinando repeat(), minmax() e a palavra-chave auto-fit você consegue uma grade responsiva sem escrever nenhuma media query:

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

Leia a regra assim: "crie quantas colunas de no mínimo 200px couberem; quando não couber mais nenhuma, quebre para a linha de baixo". Arraste a borda da janela de uma grade de produtos e veja a mágica: os cartões passam de 4 para 3, para 2, para 1 coluna sozinhos, sem uma única media query. É o layout de cartões mais usado da web moderna, e com essa única linha você já domina ele.

auto-fit vs auto-fill

Ambos criam "quantas colunas couberem", mas diferem quando sobra espaço e há poucos itens:

auto-fill: mantém as faixas vazias reservadas. Os cartões conservam sua largura mínima e sobra um vão à direita.
auto-fit: colapsa as faixas vazias para 0 e deixa que os itens existentes se estiquem para preencher a linha.

Para galerias de cartões geralmente se quer auto-fit: aproveita toda a largura. Use auto-fill quando quiser preservar a grade mesmo com poucos itens.