CSS CSS e Grid - não funciona

Gabriel Fernandes Seguro F · 23 de março de 2022

Tenho essa pagina

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Exemplo de Grid</title>



    <link rel="stylesheet" href="estilo.css">

</head>

<body>

    <div class="container">

        <header>Cabeçalho</header>

        <main>Parte principal</main>

        <aside>Area lateral</aside>

        <footer>Rodape</footer>

    </div>

</body>

</html>





Com esse arquivo estilo.css

html, body {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    background: #7159c1;

}



/*Configuração dos componentes do container*/

header {

    background: yellow;

    grid-area: "h";

}



main {

    background: RGB(56, 56, 92);

    grid-area: "m";

}



aside {

    background: green;

    grid-area: "a";

}



footer {

    background: red;

    grid-area: "f";

}



/*Configuração do container principal*/

.container {

    display: grid;

    grid-template-columns: 3fr 1fr;

    grid-template-rows: 25px 1fr 12px;

    grid-template-areas: "h h"

                        "m a"

                        "f f";

}

E a pagina não esta sendo exibida corretamente, alguém por favor consegue ver algum erro aqui, copiei o código 100% de um vídeo(

) e mesmo assim não funciona, me sindo amaldiçoado ou algo assim.

MailingTester · 23 de março de 2022

1 hora atrás, Gabriel Fernandes Seguro F disse:

grid-template-rows: 25px 1fr 12px;

Olá!
por ter usado fr e px, que são unidades de medida que dependem da medida do parent, eles ficaram sem saber o que fazer, porque o parent: .container não possui altura definida.
apenas defina para o .container:
min-height: 100vh;

ou use unidades de medida que não dependam do parent, como por exemplo: vh

MailingTester · 23 de março de 2022

8 horas atrás, Gabriel Fernandes Seguro F disse:

grid-area: "h";

}



main {

    background: RGB(56, 56, 92);

    grid-area: "m";

}



aside {

    background: green;

    grid-area: "a";

}



footer {

    background: red;

    grid-area: "f";

Outro detalhe
h, m, a e f, como valores de grid-area, não podem ficar entre aspas. defina assim:
grid-area: h;
grid-area: m;
grid-area: a;
grid-area: f;