1
<!doctype html>
2
<title>Example</title>
3
<style>
4
body {
5
  display: grid;
6
  grid-template: "header header header" 60px
7
        "article nav ads" 1fr
8
        "footer footer footer" 60px
9
        / 1fr 20% 15%;
10
  grid-gap: 10px;
11
  height: 100vh;
12
  margin: 0;
13
  }
14
header, footer, article, nav, div {
15
  padding: 20px;
16
  background: hotpink;
17
}
18
#pageHeader {
19
  grid-area: header;
20
}
21
#pageFooter {
22
  grid-area: footer;
23
}
24
#mainArticle {
25
  grid-area: article;      
26
}
27
#mainNav {
28
  grid-area: nav;
29
}
30
#siteAds {
31
  grid-area: ads;
32
}
33
</style>
34
<body>
35
  <header id="pageHeader">Header</header>
36
  <article id="mainArticle">Article</article>
37
  <nav id="mainNav">Nav</nav>
38
  <div id="siteAds">Ads</div>
39
  <footer id="pageFooter">Footer</footer>
40
</body>