<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.