Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

tamanho do grid não esta sendo respeitado

Boa tarde Pessoal

eu tenho essa estrutura do section que é filho do main

 <main class="conteudo">
        <section class="destaques">
        </section>
    </main>

no main esta uma cor de fundo do background e a definição do grid

.conteudo {
    background: #ff8080;
    grid-area: conteudo;

}

e na section o tamanho e demais dados

.destaques {
    display: grid;
    gap: 0.2em;
    grid-template-columns: 25% 25% 25% 25% ;
    grid-template-rows: 33.33% 33.33% 33.33%;
    height: calc(100vh - 50px);
}

porque mesmo definindo uma altura no elemento filho ele deixa esse gap enorme correspondente a 50px no final conforme imagem a baixo ?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas
solução!

Deixa queto já descobri o pq mas não sei como apaga o post kkk

na definição da estrutura do grid tem um tamanho fixo la de 100vh

.app {

    background: #f1f1f1;
    display: grid;  
    grid-template-areas: 
        "cabecalho"
        "conteudo"
        "rodape";
    grid-template-columns: auto ;    
    grid-template-rows: 50px 100vh auto;
}

Oi Higor, tudo bem?

Que bom que conseguiu resolver o problema! E obrigada por postar aqui a solução, com certeza pode ajudar alguém no futuro.

Bons estudos.

Abraço.