1
resposta

Dúvida Grid-templete-area

Olá professor,

Na seção "Destaques" usamos somente grid-templete-rows e grid-templete-columns para denifir linhas e colunas.

Porém, na seção "Populares" tivemos que definir novamente Grid-templete-areas para definir linhas e colunas.

Por que exatamente ?

1 resposta

Fala ai Bro, tudo bem? Vamos lá:

Na seção "Destaques" usamos somente grid-templete-rows e grid-templete-columns para denifir linhas e colunas.

Na seção "Destaques" a gente não precisa definir um layout (template), ou seja, a gente não precisa de uma definição assim: "Olha, aqui tem um cabeçalho, do lado dele tem um menu lateral e em baixo dos dois tem um conteúdo".

A gente só precisa de linhas e colunas, formando um grid para ir posicionando as caixas em suas respectivas linhas e colunas.

Porém, na seção "Populares" tivemos que definir novamente Grid-templete-areas para definir linhas e colunas. Por que exatamente ?'

Na seção "Populares" a gente quis definir um layout (template) para os card's, ou seja, a gente precisou definir: "O card vai ter um cabeçalho, em baixo dele um conteúdo e por fim no final um rodapé".

Dessa maneira a gente consegue posicionar cada elemento em suas respectivas lacunas.

Poderíamos ter feito os dois com grid-template-ares ou com linhas e colunas? Sim, mas, a ideia era mostrar abordagens e situações diferentes, onde em uma temos um layout e na outro temos um grid.

Espero ter ajudado.