Controle a grade implícita e o auto-placement

Um catálogo real não sabe quantos livros terá amanhã. CSS Grid precisa colocar itens que não receberam coordenadas e, quando necessário, criar tracks além do mapa declarado. Nesta aula, você controlará esse comportamento sem posicionar cada cartão na mão.

A malha escrita em grid-template-columns e grid-template-rows é a grade explícita. Tracks criados para acomodar o restante formam a grade implícita. O auto-placement escolhe células para itens sem posição. Pense num estacionamento: as vagas pintadas são explícitas; se a organização abre uma fileira provisória para carros extras, ela é implícita. O limite é que o navegador segue um algoritmo determinístico e pode criar tracks nos dois eixos, dependendo da direção e dos itens já posicionados.

Observe as linhas nascerem

Declare três colunas e não declare linhas:

.pedidos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Os três primeiros itens ocupam a primeira linha. O quarto precisa de outra, então o Grid cria uma linha implícita. Defina o tamanho dessas linhas com:

.pedidos {
  grid-auto-rows: minmax(5rem, auto);
}

Cada nova linha começa com pelo menos 5rem e pode crescer com o conteúdo. A propriedade correspondente para colunas implícitas é grid-auto-columns.

grid-auto-flow controla a direção do preenchimento. O valor inicial row preenche uma linha antes de avançar; column faz o equivalente por colunas. Existe ainda dense, que tenta preencher buracos anteriores com itens menores:

.pedidos {
  grid-auto-flow: row dense;
}

Dense pode fazer um item posterior aparecer visualmente antes. Isso reduz espaços vazios, mas cria divergência entre ordem visual, foco e leitura. Evite quando a sequência comunica prioridade, tempo ou significado.

Ao usar grid-auto-flow: column, declare linhas explícitas ou outra fronteira que indique quando começar uma nova coluna. Sem esse mapa, o algoritmo pode continuar criando colunas implícitas e ampliar a página horizontalmente. O overlay mostra essas faixas extras, mesmo quando elas não aparecem na sua declaração de template.

Alinhe item e malha no nível correto

justify-items alinha itens dentro das próprias células no eixo inline; align-items faz isso no eixo de bloco:

.pedidos {
  justify-items: stretch;
  align-items: center;
}

justify-content e align-content têm outro alvo: distribuem a grade inteira dentro do container quando a malha ocupa menos espaço que ele. Se uma propriedade parece não funcionar, pergunte primeiro se você quer mover o item dentro da célula ou a malha dentro do container.

Para uma exceção, justify-self e align-self atuam somente no item escolhido. O atalho place-items combina align-items e justify-items, nessa ordem:

.pedidos {
  place-items: center stretch;
}

.urgente {
  justify-self: start;
}

Use o atalho quando os dois eixos estiverem claros. Se você ainda está diagnosticando o layout, escrever as propriedades completas torna a intenção mais fácil de conferir no DevTools.

O erro comum é declarar duas linhas explícitas e assumir que o sétimo item não será renderizado. Grid não o descarta; cria uma linha implícita. Outro erro é usar dense num ranking e alterar a sequência percebida.

No laboratório, adicione pedidos até surgirem três linhas. Ative o overlay para distinguir o que foi declarado do que nasceu automaticamente. Depois teste alinhamentos mantendo o contorno da célula visível. A missão termina com sete cartões, linhas automáticas de mínimo conhecido e ordem visual igual à ordem do HTML. Explique quem criou a última linha e qual propriedade dimensionou essa linha.