grid-template-areas
HTML
<body>
<nav>Navigation</nav>
<header>Header</header>
<section>Sidebar</section>
<main>Main Content</main>
<aside>Aside 1</aside>
<aside>Aside 2</aside>
<aside>Aside 3</aside>
<footer>Footer</footer>
</body>
CSS
body {
width: 100vw;
height: 100vh;
display: grid;
grid-template-areas:
"nav nav nav"
"head head head"
"sidebar content content"
"aside1 aside2 aside3"
"footer footer footer";
// Sizing
grid-template-rows: 50px 200px 1fr 250px 50px;
grid-template-columns: repeat(3, 1fr);
}
#nav {
grid-area: nav;
}
#header {
grid-area: head;
}
#sidebar {
grid-area: sidebar;
}
#main {
grid-area: content;
}
#aside1 {
grid-area: aside1;
}
#aside2 {
grid-area: aside2;
}
#aside3 {
grid-area: aside3;
}
#footer {
grid-area: footer;
}