<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Sidebar</div>
<footer id="pageFooter">Footer</footer>
body {
display: grid;
grid-template-areas:
"header header header"
"nav article ads"
"nav footer footer";
grid-template-rows: 1fr 4fr 1fr;
grid-auto-columns: 1fr 4fr 1fr;
grid-gap: 5px;
height: 85vh;
}
header, footer, article, nav, div {
background-color: tomato;
color: white;
font-size: 1.75em;
text-align: center;
font-family: monospace;
padding: 16px;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.