grid-template-areas
HTML
<body>
<header>Header</header>
<main>Main</main>
<nav>Navigation</nav>
<aside>Sidebar</aside>
<footer>Footer</footer>
</body>CSS
body {
width: 100vw;
height: 100vh;
display: grid;
grid-template-areas:
"head head head"
"nav content sidebar"
"footer footer footer";
// Sizing
grid-template-columns: 1fr 4fr 1fr;
grid-template-rows: 100px 1fr 50px;
}
header {
grid-area: head;
}
nav {
grid-area: nav;
}
main {
grid-area: content;
}
aside {
grid-area: sidebar;
}
footer {
grid-area: footer;
}