Dificuldade com grid-template-area | CSS: dispondo elementos com Flexbox e Grid

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Como podem ver estou com dificuldade de reposicionar os elementos com o grid-template-areas. Segue código:

.principal{
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
        "titulo-pagina titulo-pagina titulo-pagina"
        "destaque-picos destaque-picos favoritos-picos"
        "secao-picos secao-picos secao-picos"
        ;
        column-gap: 32px;
        padding: 16px 60px;
        grid-column: 2;
    }
`

`.secao{
    grid-template-columns: repeat(4, 1fr);
}
.destaque-picos{
    grid-template-areas: destaque-picos;
}
.favoritos-picos{
    grid-template-areas: favoritos-picos;
}
.secao-picos{
    grid-template-areas: secao-picos;
}`

`<main class="principal principal-picos">
    <h1 class="titulo-pagina titulo-principal">Picos</h1>
    <article class="destaque cartao--destaque destaque-picos">
       <img src="flex-e-grid-main/assets/img/mapa-picos.png" alt="mapa" class="destaque__imagem">
    </article>
    <article class="favoritos favoritos-picos">
        <h3 class="titulo-favoritos">Favoritos</h3>
        <a href="#" class="favoritos__link">Ver todos</a>
        <ul class="favoritos__lista">
            <li class="favoritos__item">
                <img src="flex-e-grid-main/assets/img/miniatura_1.png" alt="Thumbnaiil" class="favoritos__item-thumbnail">
                <h4 class="favoritos__item-titulo">Wallride da FGP</h4>
                <p class="favoritos__item-perfil">Júlia Fonseca</p>
            </li>
            <li class="favoritos__item">
                <img src="flex-e-grid-main/assets/img/miniatura_1.png" alt="Thumbnaiil" class="favoritos__item-thumbnail">
                <h4 class="favoritos__item-titulo">Wallride da FGP</h4>
                <p class="favoritos__item-perfil">Júlia Fonseca</p>
            </li>
            <li class="favoritos__item">
                <img src="flex-e-grid-main/assets/img/miniatura_1.png" alt="Thumbnaiil" class="favoritos__item-thumbnail">
                <h4 class="favoritos__item-titulo">Wallride da FGP</h4>
                <p class="favoritos__item-perfil">Júlia Fonseca</p>
            </li>
            <li class="favoritos__item">
                <img src="flex-e-grid-main/assets/img/miniatura_1.png" alt="Thumbnaiil" class="favoritos__item-thumbnail">
                <h4 class="favoritos__item-titulo">Wallride da FGP</h4>
                <p class="favoritos__item-perfil">Júlia Fonseca</p>
            </li>
            <li class="favoritos__item">
                <img src="flex-e-grid-main/assets/img/miniatura_1.png" alt="Thumbnaiil" class="favoritos__item-thumbnail">
                <h4 class="favoritos__item-titulo">Wallride da FGP</h4>
                <p class="favoritos__item-perfil">Júlia Fonseca</p>
            </li>
            <li class="favoritos__item">
                <img src="flex-e-grid-main/assets/img/miniatura_1.png" alt="Thumbnaiil" class="favoritos__item-thumbnail">
                <h4 class="favoritos__item-titulo">Wallride da FGP</h4>
                <p class="favoritos__item-perfil">Júlia Fonseca</p>
            </li>
        </ul>
    </article>
    <section class="secao secao-picos">
        <h2 class="titulo-secao">Mais visitados</h2>
        <article class="cartao-visitados">
            <img src="flex-e-grid-main/assets/img/artigo_1.png" alt="imagem" class="cartao__imagem">
            <div class="cartao-visitados__conteudo">
                <p class="cartao-visitados__perfil">Bruno Lopes</p>
                <h3 class="cartao-visitados__titulo">Gap do Itaú da Voluntários da Pátria</h3>
                <p class="cartao-visitados__info cartao-visitados__info-visu">53 visualizações</p>
                <button class="cartao-visitados__botao" aria-label="acessar mapa agora">
                </button>
            </div>
        </article>`

Oi Suelen, tudo bem?

Desculpe a demora em responder!

Para realizarmos o grid como mostrado no projeto da página de picos, devemos utilizar as seguintes propriedades:

grid-template-area para criar um template com linhas, como uma planilha, onde em cada posição temos o nome das áreas que ocuparão aquele espaço. Essa propriedade deve estar no elemento que engloba todos os cartões, por exemplo na classe .principal que pertence a tag <main>:

 .principal {
     grid-template-areas: 
            "titulo-pagina titulo-pagina titulo-pagina"
            "destaque-video destaque-video videos-recentes"
            "secao-videos secao-videos secao-videos"     
        ;
display: grid;
            grid-template-columns: auto 1fr auto;
      column-gap: 32px;
           padding: 16px 60px;
            grid-column: 2;
    }

grid-area para relacionar o nome colocado no template criado com o grid-template-area. Ele deve ser aplicado na classe do elemento que controla os demais itens dentro do cartão (elemento container), por exemplo:
```
.destaque-video {
        grid-area: destaque-video;
    }

    .videos-recentes {
        grid-area: videos-recentes;
    }

    .secao-videos {
        grid-area: secao-videos;
    }
```

Com essas propriedades conseguimos ajustar cada um dos cartões dentro do layout de modo a conseguir remanejar a disposição deles com maior facilidade.

Você pode conferir o código completo desta atividade nestel link acessando a página "assets" clicando em "css" e em "estilos.css".

Caso mesmo assim, encontre dificuldades peço para que você enviasse o link do GitHub onde está o seu projeto ou o drive com os arquivos, assim posso realizar os testes e te ajudar de forma mais assertiva.

Espero que dê tudo certo. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Mergulhe em programação