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;
}