Posicione itens no Grid por linhas e span

O preenchimento automático resolve muitos catálogos, mas alguns itens precisam de destaque. Nesta aula, o primeiro livro ocupará uma região maior usando as linhas da grade, sem position: absolute e sem sair do fluxo.

Posicionamento por linhas significa declarar em quais grid lines o item começa e termina. Pense em reservar mesas num salão quadriculado: “da divisória 1 até a 3” ocupa os dois corredores entre elas. No CSS, grid-column escolhe linhas de coluna e grid-row escolhe linhas de linha. O limite é que a grade pode mudar de quantidade em outro breakpoint; números fixos precisam continuar existindo nessa nova malha.

Use início e fim explícitos

Com três colunas, existem quatro linhas verticais numeradas:

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

.destaque {
  grid-column: 1 / 3;
}

O item começa na linha 1 e termina na 3, portanto ocupa dois tracks. O mesmo princípio vale para o outro eixo:

.destaque {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

Agora ele ocupa duas colunas e duas linhas. Ative o overlay do Grid para ver os números. A borda final também conta como linha; esse detalhe explica boa parte dos erros de “uma coluna a mais”.

Linhas negativas contam a partir do final da grade explícita:

.banner {
  grid-column: 1 / -1;
}

Esse banner vai da primeira à última linha explícita, independentemente de existirem três ou quatro colunas. A técnica é útil para cabeçalhos que atravessam a largura completa.

Use span quando importa a quantidade

Se a decisão é “ocupe dois tracks a partir de onde cair”, span expressa melhor:

.destaque {
  grid-column: span 2;
  grid-row: span 2;
}

O auto-placement encontra a posição e reserva a extensão solicitada. Isso reduz dependência de números absolutos, mas ainda exige espaço compatível. Numa grade de uma coluna, span 2 pode provocar uma segunda coluna implícita. Por isso a regra responsiva deve devolver grid-column: auto ou ajustar o span.

O inspetor mostra também a área ocupada pelo item. Use essa marcação antes de trocar números: se o destaque termina na linha 3, ele ocupa os tracks anteriores a ela, não “a coluna 3”. Depois experimente grid-column: 2 / -1 para começar na segunda linha e terminar no limite explícito. Preveja quantos tracks serão atravessados antes de atualizar.

Não use posicionamento para reescrever a história

Grid pode apresentar um item antes de outro sem mudar o HTML. Esse poder cria o mesmo risco de order no Flexbox: foco e leitura assistiva seguem o documento, não necessariamente o desenho. Escreva primeiro uma ordem que faça sentido e use posicionamento para tamanho e ênfase.

Outro erro é declarar grid-column: 1 / 4 numa grade que vira duas colunas e não revisar o breakpoint. O navegador pode criar estrutura implícita e o layout parece “ignorar” sua media query. Inspecione linhas explícitas e implícitas.

No laboratório, dê ao destaque dois tracks em cada eixo. Em seguida, mude a grade para uma coluna e neutralize a expansão. A missão termina com seis cartões, um destaque grande na tela larga, todos em uma coluna estreita e Tab seguindo a mesma sequência visual. Desenhe as linhas antes de escrever os números; assim o código descreve uma região conhecida.