Pq foi adicionado um grid e um display:flex no mesmo elemento? não poderia ser somente display:flex no cabeçalho ?
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!
Pq foi adicionado um grid e um display:flex no mesmo elemento? não poderia ser somente display:flex no cabeçalho ?
Olá Afrânio, tudo bem?
A primeira vista, parece que está sendo aplicado dois displays diferentes para o mesmo elemento container que é o cabeçalho, mas não é isso que está ocorrendo de fato. Vamos entender!
O display grid está sendo aplicado no elemento <body>, onde ele possui o grid-template-areas para dispor as áreas do seu container com seus 3 elementos filhos, ou seja, o cabecalho, o conteudo e o rodape. Veja:
.app {
background: #f1f1f1;
display: grid;
font-family: Arial, Helvetica, sans-serif;
grid-template-areas:
"cabecalho"
"conteudo"
"rodape";
grid-template-columns: auto;
grid-template-rows: 50px auto auto;
}Para que o cabeçalho preencha essa área do <body>, ele precisa ter um grid-area que leve o mesmo nome descrito no grid-template-areas e é por isso que foi adicionar na classe .cabecalho o código grid-area: cabecalho;.
A relação é entre o container body e o seu elemento filho cabecalho.
O cabeçalho, por sua vez, também atua como um container e para dispor o seu elemento filho <nav> em linha, é aplicado o display: flex em .cabecalho.
A relação é entre o container cabecalho e o seu elemento filho nav
A propriedade display é uma propriedade que obrigatoriamente é colocada para fazer com que um elemento atue como container ou pai. Já a propriedade grid-area, é uma propriedade de um elemento item ou filho. Dessa forma, não existe um elemento que está atuando como um container de flex e de grid ao mesmo tempo aqui, mas sim, como container de flex e item de grid.
Espero ter ajudado, em caso de dúvida ou dificuldades, estamos por aqui.
Abraços e bons estudos!