De onde vem esse logo sobre login perfil carrinho
input input...
O que isso faz e da onde vem esse nomes?
Como o programa sabe que cada nome específico se refere a cada elemento específico?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
De onde vem esse logo sobre login perfil carrinho
input input...
O que isso faz e da onde vem esse nomes?
Como o programa sabe que cada nome específico se refere a cada elemento específico?
Oi, Reinaldo! Tudo bem?
Boa pergunta! Esses nomes (logo, sobre, login, perfil, carrinho, input) são rótulos que você cria para organizar o layout usando o CSS Grid, mais especificamente com a propriedade grid-template-areas.
Funciona assim:
** Primeiro define as áreas do grid**
Você cria um "mapa" do seu layout com grid-template-areas, dando nomes para cada espaço. No seu exemplo, o cabeçalho tem duas linhas:
.cabecalho__nav_list {
grid-template-areas:
"logo sobre login perfil carrinho"
"input input input input input";
grid-template-columns: 1fr 2fr .5fr .5fr .5fr;
}
input se repete, ocupando toda a linha.Depois é associado cada elemento a uma área
Depois, para cada elemento HTML, você usa grid-area para dizer em qual área ele deve ficar:
.cabecalho__logo {
grid-area: logo;
}
.cabecalho__nav_list_item-sobre {
grid-area: sobre;
}
.cabecalho__nav_list_item-login {
grid-area: login;
}
/* ...e assim por diante */
Resumo:
grid-template-areas cria o mapa do layout,grid-area posiciona cada elemento nesse mapa.Isso deixa o layout mais fácil de entender e ajustar, especialmente em designs responsivos.
Aqui tem uma imagem que ajuda a visualizar melhor:
Espero ter ajudado! Bons estudos!
Sucesso ✨