Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

grid-template-areas na classe card-corpo

Boa noite,

No seguinte trecho de código da aula:

.populares__card___corpo {
  display: grid;
  grid-area: card-corpo;
  grid-row-gap: 0.5rem;
  grid-template-areas:
    'card-cabecalho'
    'card-conteudo';
  grid-template-rows: 50px auto;
  padding: 0.75rem;
}

As áreas nomeadas "card-cabecalho" e "card-conteudo" não foram utilizadas, portanto bastava eu utilizar o grid-template-rows, certo?

A ideia era de ser utilizada na classe "populares__card___cabecalho" e "populares__card___descricao"?.

Com isso me veio a dúvida, quando utilizar um grid com áreas nomeadas?

2 respostas
solução!

Olá Enkindú, tudo bem com você?

Eu diria que é mais uma questão da proporção, quantidade de elementos, e a posição, mas vamos com calma:

Em relação a proporção eu me refiro a importância do grid, por exemplo se vamos utilizar para estruturar a home, faz sentido que cada componente esteja devidamente nomeado, auxilia até no processo de inspecionar elementos, dado que a maioria dos navegadores quando setamos o grid-area consegue definir visualmente para nos

Em relação a quantidade de elementos, por exemplo, dentro de um card, tínhamos apenas 2 elementos, então fica bem simples de ver qual o papel de cada um, mesmo sem ter um nome, mas se a gente tiver 4 ou mais, fica difícil enxergar a relação

E em relação a posição é que as vezes podemos fazer igual no menu de dividir em vários pedaços, colocar um elemento em um canto específico, e dessa forma com o grid-area nosso código fica semanticamente mais fácil de saber o que está acontecendo :)

Abraços e Bons Estudos!

Boa noite Geovani, tudo bom?

Bacana, era só para saber se foi o professor que acabou esquecendo.

Agradeço a explicação sobre "o uso" do grid-template-area, faz total sentido por questão de organização e essa parte de inspecionar pelo browser realmente com as áreas nomeadas fica bem mais simples.

Abraço.