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

Grid nao funciona

Referente ao curso CSS Grid: simplificando layouts

por Carolina Conceicao da Costa
| 39.8k xp | 16 posts

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!
por Matheus Henrique Castiglioni
| 5303.5k xp | 9004 posts
Instrutor Senior Software Engineer

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.

por Carolina Conceicao da Costa
| 39.8k xp | 16 posts

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;
}
por Matheus Henrique Castiglioni
| 5303.5k xp | 9004 posts
Instrutor Senior Software Engineer

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.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software