1
<!doctype html>
2
<title>CSS Grid Template 1</title>
3
<style>
4
body {
5
  display: grid;
6
  grid-template-areas:
7
    "header header header"
8
    "nav article ads"
9
    "nav footer footer";
10
  grid-template-rows: 80px 1fr 70px;  
11
  grid-template-columns: 20% 1fr 15%;
12
  grid-row-gap: 10px;
13
  grid-column-gap: 10px;
14
  height: 100vh;
15
  margin: 0;
16
  }  
17
header, footer, article, nav, div {
18
  padding: 1.2em;
19
  background: gold;
20
  }
21
#pageHeader {
22
  grid-area: header;
23
  }
24
#pageFooter {
25
  grid-area: footer;
26
  }
27
#mainArticle {
28
  grid-area: article;      
29
  }
30
#mainNav {
31
  grid-area: nav;
32
  }
33
#siteAds {
34
  grid-area: ads;
35
  }
36
/* Stack the layout on small devices/viewports. */
37
@media all and (max-width: 575px) {
38
  body {
39
    grid-template-areas:
40
      "header"
41
      "article"
42
      "ads"
43
      "nav"
44
      "footer";
45
    grid-template-rows: 80px 1fr 70px 1fr 70px;  
46
    grid-template-columns: 1fr;
47
 }
48
}
49
</style>
50
<body>
51
  <header id="pageHeader">Header</header>
52
  <article id="mainArticle">Article</article>
53
  <nav id="mainNav">Nav</nav>
54
  <div id="siteAds">Ads</div>
55
  <footer id="pageFooter">Footer</footer>
56
</body>