​x
 
1
<!doctype html>
2
<title>Example</title>
3
<style>
4
body {
5
  display: grid;
6
  grid:
7
    "header header header"
8
    "nav article ads"
9
    "footer footer footer"
10
    / 20% 1fr 15%;
11
  grid-gap: 10px;
12
  animation: myAnimation 1s ease 1s 5 alternate forwards;
13
  }
14
header, footer, article, nav, div {
15
  padding: 20px;
16
  background: gold;
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
​
34
@keyframes myAnimation {
35
  100% {
36
  grid:
37
    "header article ads"
38
    "nav article ads"
39
    "footer article ads";
40
  grid-gap: 30px;
41
  }
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>