CSS Grid começa pelo container, tracks e linhas

CSS Grid organiza conteúdo em duas dimensões: linhas e colunas. Nesta aula, você vai criar uma estante com seis livros e aprender os nomes da malha que o navegador calcula. Esses nomes serão o mapa das próximas propriedades.

O elemento com display: grid é o grid container. Seus filhos diretos são grid items. Uma faixa inteira entre duas linhas é um track; o encontro de uma linha com uma coluna forma uma célula. Imagine papel quadriculado: os traços são grid lines, os corredores entre traços são tracks e cada quadrado é uma célula. O limite da comparação é que a malha CSS não precisa ter células rígidas: conteúdo e regras automáticas podem aumentar tracks ou criar outros fora do desenho inicial.

Ative a grade no pai

Comece com quatro cartões:

<section class="catalogo">
  <article>HTML</article>
  <article>CSS</article>
  <article>JavaScript</article>
  <article>Node</article>
</section>

Assim como no Flexbox, o contexto nasce no elemento pai:

.catalogo {
  display: grid;
  grid-template-columns: 12rem 12rem;
}

grid-template-columns declara dois tracks de coluna com 12rem. Quatro itens preenchem duas colunas e formam duas linhas. Os artigos são itens porque estão diretamente dentro de .catalogo. Um parágrafo dentro de um artigo não é item da grade externa; ele participa do layout interno do cartão.

Conte tracks e linhas separadamente

Duas colunas possuem três linhas verticais: início, divisão e final. Duas linhas de conteúdo possuem três linhas horizontais. O inspetor de Grid do navegador pode sobrepor esses números na tela. Ative essa visualização e compare com:

.catalogo {
  display: grid;
  grid-template-columns: 10rem 14rem 10rem;
  grid-template-rows: 6rem 8rem;
  gap: 1rem;
}

Agora existem três tracks de coluna e dois de linha na grade explícita, isto é, na malha que você declarou. gap cria corredores entre os tracks sem alterar a contagem de linhas. A célula não é um elemento HTML novo; é uma região disponível para posicionamento.

Abra o painel Layout das ferramentas do navegador e ligue o destaque da grade. Além das linhas numeradas, confira a largura calculada de cada track. Essa visualização separa o que você declarou do que o conteúdo fez crescer. Se o overlay mostra três colunas, mas um cartão parece ocupar duas, inspecione o posicionamento do item antes de acrescentar outra coluna.

Deixe o conteúdo revelar o limite

Alturas rígidas podem cortar um título ou produzir overflow. Para uma linha que precisa ter mínimo, mas crescer com o conteúdo, use:

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

minmax() define intervalo: no mínimo 5rem e, no máximo, espaço suficiente para o conteúdo. Você aprofundará essa função na próxima aula.

O erro mais comum é aplicar display: grid em cada cartão e esperar que o catálogo crie colunas. Isso organiza apenas os filhos internos de cada cartão. Outro erro é escrever grid-template-columns sem ativar Grid; fora desse contexto, a propriedade não monta a malha.

No laboratório, comece com três colunas, ative o overlay e nomeie container, itens, tracks, linhas e células. Depois mude para duas colunas e observe que a ordem do HTML continua igual enquanto o preenchimento ganha outra forma. A missão termina com uma grade de duas colunas e três linhas cuja malha você consegue desenhar antes de abrir o navegador.