Crie tracks flexíveis com fr, repeat e minmax

Colunas de 250 pixels parecem simples até a tela ter 390 pixels ou o texto crescer. Nesta aula, você vai declarar proporções e limites para que a grade negocie o espaço sem depender de contas repetidas.

A unidade fr representa uma fração do espaço disponível no container. repeat() repete um padrão de tracks, e minmax() declara o intervalo aceito para um track. Pense em dividir uma mesa depois que pratos e corredores obrigatórios já foram colocados: cada ficha fr recebe uma parte do espaço que restou. O limite é que conteúdo tem tamanho intrínseco; uma palavra longa pode impor um mínimo e mudar a divisão.

Reparta a sobra em proporções

Uma grade com duas colunas iguais pode ser escrita assim:

.catalogo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

Depois de reservar o gap e outros tamanhos fixos, o navegador divide a sobra em duas partes. Para uma coluna duas vezes mais participativa:

.catalogo {
  grid-template-columns: 2fr 1fr;
}

Isso descreve a proporção do espaço flexível, não promete que a largura final será exatamente o dobro em qualquer conteúdo. Um item com mínimo intrínseco grande pode exigir mais.

Remova repetição sem esconder a malha

Quatro colunas iguais ficam mais legíveis com:

.catalogo {
  grid-template-columns: repeat(4, 1fr);
}

repeat(4, 1fr) produz o mesmo padrão que escrever 1fr quatro vezes. A função também aceita um trecho composto, como repeat(2, 2fr 1fr). Use a forma que deixa o desenho mais claro; reduzir caracteres não é o objetivo principal.

Lembre que gap entra antes da divisão das frações. Aumentar a lacuna reduz o espaço que sobra para os tracks, mesmo que a proporção entre eles continue.

Dê um piso e um teto ao track

Para uma sidebar entre 12rem e 18rem e conteúdo ocupando a sobra:

.pagina {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
}

O primeiro track respeita o intervalo. O segundo usa minmax(0, 1fr) para poder encolher até zero no cálculo, em vez de manter automaticamente o mínimo do conteúdo. Isso é útil quando há texto ou código largo e você já decidiu como tratar quebra e overflow dentro do item.

Você também encontrará min-content e max-content na documentação. min-content aproxima o track do menor tamanho que o conteúdo aceita com suas quebras; max-content considera o tamanho sem quebras opcionais. Eles não são sinônimos de menor e maior número fixo: dependem do conteúdo real daquele item.

Um erro recorrente é usar repeat(4, 1fr) em qualquer largura e esperar que as colunas se tornem responsivas sozinhas. Quatro tracks continuam sendo quatro; em tela estreita, cada um pode ficar inutilizável. Media query ou repetição automática, estudada na última aula, precisa mudar essa decisão.

Outro tropeço é misturar porcentagens e gap sem considerar que quatro colunas de 25% já ocupam toda a largura; os gaps vêm além e causam overflow. Frações repartem o espaço disponível depois das lacunas e expressam melhor esse caso.

No laboratório, compare 240px 240px 240px, repeat(3, 1fr) e repeat(3, minmax(0, 1fr)). Inclua um título grande e reduza a prévia antes de executar. A missão termina quando quatro cartões viram uma coluna em tela estreita e nenhum texto cria scroll horizontal. Explique qual valor define quantidade, qual reparte sobra e qual impõe limites.