div class="estrutura">
<header class="header">
<a href="#" class="logo">
<img src="wildbeast.svg" alt="Logo">
</a>
<nav class="navegacao">
<ul>
<li><a href="#">sobre</a></li>
<li><a href="#">animais</a></li>
<li><a href="#">contato</a></li>
</ul>
</nav>
</header>
Na class "estrutura" eu defini o grid e as colunas. Depois, na class "header" eu fui definir como flex para organiza-lo com esse display, porém a imagem "logo" desaparece e as propriedades flex não funcionam, nenhuma delas. Ex:
.estrutura{
display: grid;
grid-template-columns: minmax(160px, 1fr) 3fr 300px;
grid-template-areas:
'header header header'
'sidenav content anuncios'
'rodape rodape rodape'
;
}
.header{
display: flex;
grid-area: header;
background-image: linear-gradient(to right, #8844ee, #B07DFB);
padding: 30px;
}