Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Fiz de uma forma diferente e funcionou do mesmo jeito.

Trabalhei e ajustei o Layout não com o valor span n mas sim com grid-template-areas. É incorreto?

.corpo {
    background-color: #444444;
    padding: 8px;
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "cabecalho cabecalho cabecalho"
                                            "lateral meio direita-cima"
                                            "lateral meio direita-baixo";
}

.cabecalho {
    background-color: #cc2a2a;
    border-radius: 10px;
    min-width: 50px;
    min-height: 50px;
    margin: 8px;
    grid-area: cabecalho;



}

.lateral {
    background-color: #45cc2a;
    border-radius: 10px;
    min-width: 50px;
    min-height: 50px;
    margin: 8px;
    grid-area:lateral ;
}

.meio {
    background-color: #2aa6cc;
    border-radius: 10px;
    min-width: 50px;
    min-height: 50px;
    margin: 8px;
    grid-area: meio;
}

.direita-cima {
    background-color: #352acc;
    border-radius: 10px;
    min-width: 50px;
    min-height: 50px;
    margin: 8px;
    grid-area: direita-cima;
}

.direita-baixo {
    background-color: #cc2a96;
    border-radius: 10px;
    min-width: 50px;
    min-height: 50px;
    margin: 8px;
    grid-area: direita-baixo;
}
1 resposta
solução!

Olá, Narcipe. Incorreto não é, com a prática você vai descobrir que existem várias maneiras de resolver um problema. Meu conselho é que você teste mudanças para se acostumar com os nomes e fuções das tags, e assim que conseguir chegar ao resultado desejado, tente melhorar o que você já fez, como por exemplo, colocar o "repeat()" dentro do grid-tamplate-coluns, mas no geral, a ideia é essa.

Boa sorte nos seus testes e bons estudos!