<header id="header">Header</header>

<article id="article">Article</article>

<nav id="nav">Nav</nav>

<div id="sb">Sidebar</div>

<footer id="footer">Footer</footer>

body { 
  display: grid;
  grid: "header header header"
        "nav article sb"
        "footer footer footer"
        / 20% 1fr 15%;
  grid-gap: 16px;
}

header, 
footer, 
article, 
nav, 
div {
  padding: 32px 16px;
  background: #eee;
  text-align: center;
  color: #666;
  font-weight: 700;
}

#header   { grid-area: header; }
#footer   { grid-area: footer; }
#article  { grid-area: article; }
#nav      { grid-area: nav; }
#sb       { grid-area: sb; }