Pq foi adicionado um grid e um display:flex no mesmo elemento? não poderia ser somente display:flex no cabeçalho ?
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!