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