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

Grid nao funciona

Ola! fiz o curso CSS Grid e estou tentando montar uma pagiina a partir dele. Mas nao consigo distribuir o conteudo nas celulas do grid. Voce pode me ajudar?

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Thais Fachini - Health Nutrition</title>
    <link href="./css/normalize.css" rel="stylesheet">
    <link href="./css/reset.css" rel="stylesheet">
    <link href="./css/style.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Cagliostro&display=swap" rel="stylesheet">

</head>
    <body class="app">
        <header class="header">
            <div class="container">
                <div class="logo">
                    <img src="img/logo_small.png" alt="Logo Thais Fachini" class="logo-img">
                    <div class="logo-name">
                        <h1>THAÍS FACHINI</h1>
                        <p>Nutrition for Life</p>
                    </div>
                </div>
                <nav class="header-nav">
                    <a href="#" class="main-header-nav-link">About</a>
                    <a href="#" class="main-header-nav-link">How it Works</a>
                    <a href="#" class="main-header-nav-link">Sign Up</a>
                    <a href="#" class="main-header-nav-link">Member</a>
                </nav>
            </div>
            <section class="header-section-1">
                <h1 class="section-1-text">Alimentação funcional para o equilíbrio do corpo<br> e o prazer de comer bem.</h1>
                <nav class="section-1-nav">
                    <a href="#" class="section-1-but full">Sign Up</a>
                    <a href="#" class="section-1-but ghost">Member</a>
                </nav>
            </section>
        </header>
    </body>

/* ----------------------------------------------- */
/* CSS*/
/* ----------------------------------------------- */

.app {
    background: #fff;
    color: #555;
    font-family: 'Lato', 'Arial', sans-serif;
    font-weight: 300;
    font-size: 20px;


    display: grid;  
    grid-template-areas: 
        "header"
        "about"
        "howitworks"
        "sigup"
        "footer";
    grid-template-columns: auto;
    grid-template-rows: 100vh 100vh 100vh 100vh 100vh;
}

.header {
    grid-area: header;
      display: grid;
    grid-gap: .2rem;
    grid-template-columns: 20% 25% 25% 30%;
    grid-template-rows: 20% 30% 20% 30%;

    height: 100vh;

    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/hero.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;


        .container .logo{
        grid-column: 2 / 3;
        grid-row: 2 / 3;

        display: flex;
        justify-content: space-between;
        }

            .container .logo-img{
                height: 80px;
                width: auto;
            }

            .container .logo-name{
                display: flex;
                flex-direction: column;
                margin-left: 20px;
                align-items: flex-start;
            }

            .container .logo-name h1{
                color: #fff;
                font-family: 'Cagliostro', sans-serif;
                text-decoration: none;
                font-size: 120%;
            }

            .container .logo-name p{
                color: #fff;
                text-decoration: none;
                text-transform: uppercase;
                font-size: 70%;
                font-weight: 500;
            }

        .main-header-nav-link{
            grid-column: 4 / 5;
            grid-row: 1 / 1;

            color: #fff;
            text-decoration: none;
            font-size: 100%;
            padding: 8px 10px;
            border-bottom: 2px solid transparent;
            transition: border-bottom 0.2s;
        }


        .section-1-text{
            grid-column: 2 / 4;
            grid-row: 2 / 2;

            display: flex;
            align-items: center;
            justify-content: center;
        }

        .section-1-nav{
            grid-column: 2 / 4;
            grid-row: 3 / 3;

            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            text-decoration: none;
            font-size: 100%;
            padding: 8px 10px;
            border-bottom: 2px solid transparent;
            transition: border-bottom 0.2s;
        }    

3 respostas
solução!

Fala ai Carolina, tudo bem? Acho que seu problema é em relação a definição dos posicionamentos, você está tentando posicionar os elementos que são filhos dos filhos do grid.

Para que seja possível utilizar o CSS Grid, é necessário que você posicione os seus filhos diretos (eles que serão grid-item) e não filhos dos filhos.

Espero ter ajudado.

Ola Matheus! Obrigada pela ajuda. Ainda estou com dificuldades. Modifiquei o codigo para tentar ficar mais simples e tambem porque acho que estava dando confusao usar o display:grid e o display:flex no mesmo arquivo CSS. Tem algum problema nisso?

Fiquei com a impressao que, no grid, tenho que referenciar o elemento a tag

. Eh isso mesmo?

Ainda assim, estou com problemas de distribuicao no grid. As coisas nao ficam onde deveriam estar.

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Thais Fachini</title>
    <link href="./css/normalize.css" rel="stylesheet">
    <link href="./css/reset.css" rel="stylesheet">
    <link href="./css/style.css" rel="stylesheet">
    <link href="./css/grid.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Cagliostro&display=swap" rel="stylesheet">

</head>
    <body class="app">
        <div class="header">
            <div class="logo-img">LOGO</div>
            <div class="logo-name"><h1>THAÍS FACHINI</h1><p>Nutrition for Life</p></div>
            <div class="header-nav">
                <nav>
                    <a href="#" class="header-nav-link">About</a>
                    <a href="#" class="header-nav-link">How It Works</a>
                    <a href="#" class="header-nav-link">Sign Up</a>
                    <a href="#" class="header-nav-link">Member</a>
                </nav>
            </div>
            <div class="text">Alimentação funcional para o equilíbrio do corpo<br> e o prazer de comer bem.</div>
            <div class="buttons">
                <nav>
                    <a href="#" class="section-1-but-full">Sign Up</a>
                    <a href="#" class="section-1-but-ghost">Member</a>
                </nav>
            </div>
        </div>
        <div class="about">About</div>
        <div class="howitworks">How it Works</div>
        <div class="signup">Sign Up</div>
        <div class="footer">Footer</div>
    </body>
.header {
    grid-area: header;
    padding: 0 2rem;
    align-items: flex-end;

    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/hero.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;

    display: grid;
    grid-template-columns: 10% 50% 40%;
    grid-template-rows: 10% 50% 25%;
    grid-gap: .2rem;

    .logo-img {
        grid-column: 1 / 2;
        grid-row: 1 / 1;

        height: 80px;
        width: auto;
    }

    .logo-name {
        grid-column: 2 / 3;
        grid-row: 1 / 1;
    }

    .header-nav{
        grid-column: 3 / 4;
        grid-row: 1 / 1;
    }

    .header.text{
        grid-column: 2 / 4;
        grid-row: 2 / 2;

        align-items: center;
        justify-content: center;
    }

    .header.buttons{
        grid-column: 2 / 4;
        grid-row: 3 / 3;

        align-items: center;
        justify-content: center;
    }    

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.logo-name h1{
    display:flex;
    color: #fff;
    font-family: 'Cagliostro', sans-serif;
    text-decoration: none;
    font-size: 120%;
}

.logo-name p{
    display:flex;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 70%;
    font-weight: 500;

.header-nav-link{
    display: flex;    
    color: #fff;
    text-decoration: none;
    font-size: 200%;
    padding: 8px 10px;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.2s;
}

.section-1-but-full, .section-1-but-ghost{
    display: flex;
    color: #fff;
    text-decoration: none;
    font-size: 100%;
    padding: 8px 10px;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.2s;
}    

.app {

    background-color: #ccc;
    color: #555;
    font-family: 'Lato', 'Arial', sans-serif;
    font-weight: 300;
    font-size: 20px;


    display: grid;  
    grid-template-areas: 
        "header"
        "about"
        "howitworks"
        "signup"
        "footer";
    grid-template-columns: auto;
    grid-template-rows: 100vh 100vh 100vh 100vh 100vh;
}

Fala ai Carolina, tudo bem? A dúvida foi solucionada? Vi que marcou ela como solucionada.

Desculpa a demora, estava bem corrido porque aqui as coisas.

Modifiquei o codigo para tentar ficar mais simples e tambem porque acho que estava dando confusao usar o display:grid e o display:flex no mesmo arquivo CSS. Tem algum problema nisso?

Não tem problema nenhum, pode declarar ambos display's no mesmo arquivo sem problemas.

Ainda assim, estou com problemas de distribuicao no grid. As coisas nao ficam onde deveriam estar.

Me fala o layout que você precisa montar, manda uma imagem exemplificando a estrutura, dai eu monto um exemplo para você.

Espero ter ajudado.