Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Qual a lógica por debaixo dos panos do ajuste em cima do last-child?

Referente ao curso CSS: construindo layouts responsivos com grid, no capítulo Definindo a área dos elementos no grid e atividade Colunas e linhas

por ADILSON CHRESTANI JUNIOR
| 15.3k xp | 6 posts

Boa noite pessoal! Tudo bem com vocês?

Uma dúvida um pouco mais técnica para justificar o "ajuste de coluna fantasma" que fizemos na aula. Entendo que ao instanciar o grid com 4 colunas no elemento rodape__linha nós passamos a adotar essa quebra para ambas as linhas que são filhos do objeto.

Minha dúvida está no segundo grid sob o last-child: Sei que aplicamos um grid-template para passar de 4 para 2, mas como o CSS "entende" que ele precisa separa-las em lados opostos da linha e não uma seguida da outra? Em outras palavras, como ele sabe que é exatamente as colunas do centro que ele precisa "pular"?

1 resposta
por Mike de Sousa
| 1237.7k xp | 2170 posts
Alura Scuba Team Suporte Educacional

Oi Adilson, boa noite! Tudo bem?

A sua dúvida é muito interessante e envolve um conceito importante do CSS Grid. Quando você altera o grid-template-columns de 4 para 2 no last-child, o CSS Grid, em conjunto com o justify-content: space-between, distribui automaticamente as colunas da forma mais espaçada possível dentro do container.

O space-between é a chave aqui. Ele faz com que o espaço disponível entre as colunas seja distribuído igualmente, colocando as duas colunas que você definiu nas extremidades do grid. Isso cria a ilusão de que há colunas "fantasmas" no meio, porque o espaço entre as colunas é maximizado. O CSS não está realmente "pulando" colunas, mas sim espaçando as colunas existentes para que pareçam estar nas extremidades.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar.

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado