Duvida

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;
}

• Na primeira linha, cada palavra representa um espaço para um elemento diferente.
• Na segunda linha, o 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 ✨