Nie będę się rozpisywał, dlaczego znacznik <body> nie nadaje się do ustawienia grid-a, bo @ScriptyChris w Mojej opinii wyczerpał temat. U Mnie się sprawdza taki zapis, że ustawiam kontener dla grid-a, zaraz po <body>
<body>
<div class="grid-container">
. . .
</div>
</body>
@viewport {
width: device-width;
initial-scale: 1;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
padding:0;
margin:0;
border:0;
}
.grid-container {
display: grid;
. . .
}
możesz tworzyć kolejnego grid-a wewnątrz jednej z "komórek" już utworzonego "bazowego" grid-a 
Codepen
@viewport {
width: device-width;
initial-scale: 1;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
padding:0;
margin:0;
border:0;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 5fr;
grid-template-rows: 1fr 1fr;
gap: 0px 0px;
grid-template-areas:
"header main"
". main";
margin:0 auto;
padding: 0;
font-family: 'Open Sans', sans-serif;
width: 1300px;
}
.header {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas:
"logo nav";
grid-area: header;
}
.logo { grid-area: logo; }
.logo img {
width: 40px;
height: 45px;
margin: 0.5em;
}
.nav { grid-area: nav; }
.nav a { display: block; }
.main { grid-area: main; }
<body>
<div class="grid-container">
<div class="header">
<div class="logo">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.wcn82aRTXN-iChzl9SutNAAAAA%26pid%3DApi&f=1" alt="logo_pex">
Photoshop Website template
</div>
<div class="nav">
<nav>
<a href="#">About</a>
<a href="#">How it works</a>
<a href="#">Services</a>
<a href="#">FAQ</a>
<a href="#">Contact</a>
<input>
</nav>
</div>
</div>
<div class="main">
<main>
<article>
<h4> lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur velit doloremque itaque perspiciatis temporibus, reprehenderit delectus commodi rem error eaque aut repellat perferendis eveniet voluptates reiciendis ipsum ab, exercitationem dolores!</p>
</article>
<article>
<h4> lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur velit doloremque itaque perspiciatis temporibus, reprehenderit delectus commodi rem error eaque aut repellat perferendis eveniet voluptates reiciendis ipsum ab, exercitationem dolores!</p>
</article>
<article>
<h4> lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur velit doloremque itaque perspiciatis temporibus, reprehenderit delectus commodi rem error eaque aut repellat perferendis eveniet voluptates reiciendis ipsum ab, exercitationem dolores!</p>
</article>
<article>
<h4> lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur velit doloremque itaque perspiciatis temporibus, reprehenderit delectus commodi rem error eaque aut repellat perferendis eveniet voluptates reiciendis ipsum ab, exercitationem dolores!</p>
</article>
<div class="pink_placeholder">
</div>
<article>
<img src="img/Pex_04.png" alt="foto_hand_pencil">
<h4>lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa itaque molestias sint consequuntur, quo autem eveniet facere error, animi accusamus perferendis est? Ullam enim doloribus iste nesciunt, magnam sunt. Expedita?</p>
</article>
<article>
<h1>Experience the rush today</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et aliquam eligendi quam dolores aut, magnam unde </p>
<img src="img/Pex_06.png" alt="foto_mountain_tree">
<div class="purple_placeholder">
</div>
<div class="purple_button">
Get Started Today
</div>
</article>
<img src="img/Pex_07.png" alt="foto_hand_food">
<article>
<h4> A HEADING IS WHAT YOU NEED HERE</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum quos eos vero, aperiam voluptatem tempora accusantium expedita, nemo doloremque enim velit ea natus illo? Fugit aperiam magnam consectetur dignissimos id!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi doloribus tempora nostrum nesciunt, culpa explicabo id impedit hic excepturi ad accusamus, minus, molestias quam. Autem beatae placeat odio ut temporibus?</p>
<img src="img/Pex_09.png">
</article>
<footer>
<h4>lorem ipsum Footer</h4>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur itaque, quae sunt quaerat aperiam eligendi possimus molestiae architecto incidunt cum nam inventore vel corporis nisi illum alias similique officiis nesciunt?</p>
</footer>
</main>
</div>
</div>
</body>
