​x
 
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
  animation: myAnimation 1s ease 1s 5 alternate forwards;
11
  grid-gap: 10px;
12
  height: 100vh;
13
  margin: 0;
14
  }
15
header, footer, article, nav, div {
16
  padding: 20px;
17
  background: hotpink;
18
}
19
#pageHeader {
20
  grid-area: header;
21
}
22
#pageFooter {
23
  grid-area: footer;
24
}
25
#mainArticle {
26
  grid-area: article;      
27
  }
28
#mainNav {
29
  grid-area: nav;
30
  }
31
#siteAds {
32
  grid-area: ads;
33
  }
34
​
35
@keyframes myAnimation {
36
  100% {
37
  grid-template:
38
    "header header header" 60px
39
    "nav article ads" 1fr
40
    "nav footer footer" 60px
41
    / 20% 1fr 15%;
42
  }
43
</style>
44
<body>
45
  <header id="pageHeader">Header</header>
46
  <article id="mainArticle">Article</article>
47
  <nav id="mainNav">Nav</nav>
48
  <div id="siteAds">Ads</div>
49
  <footer id="pageFooter">Footer</footer>
50
</body>