<div class="container">
<header>Header</header>
<nav>Nav</nav>
<main>Main</main>
<aside>Aside</aside>
<footer>Footer</footer>
</div>
<style>
.container {
display: grid;
grid-template-rows: 1fr 5fr 1fr;
grid-template-columns: 2fr 5fr 3fr;
width: 100vw;
height: 100vh;
background: #eee;
grid-gap: .75em;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
header {
grid-area: header;
background: lightcoral;
}
nav {
grid-area: nav;
background: lightblue;
}
main {
grid-area: main;
background: lightgray;
}
aside {
grid-area: aside;
background: lightgoldenrodyellow;
}
footer {
grid-area: footer;
background: lightseagreen;
}
</style>