CSS3 grid-template

<!doctype html>
<title>Example</title>
<style>
body { 
  display: grid;
  grid-template: "header header header" 60px
        "article nav ads" 1fr
        "footer footer footer" 60px
        / 1fr 20% 15%;
  animation: myAnimation 1s ease 1s 5 alternate forwards;
  grid-gap: 10px;
  height: 100vh;
  margin: 0;
  }
header, footer, article, nav, div {
  padding: 20px;
  background: hotpink;
}
#pageHeader {
  grid-area: header;
}
#pageFooter {
  grid-area: footer;
}
#mainArticle { 
  grid-area: article;      
  }
#mainNav { 
  grid-area: nav; 
  }
#siteAds { 
  grid-area: ads; 
  }

@keyframes myAnimation {
  100% {
  grid-template: 
    "header header header" 60px
    "nav article ads" 1fr
    "nav footer footer" 60px
    / 20% 1fr 15%;
  }
</style>
<body>
  <header id="pageHeader">Header</header>
  <article id="mainArticle">Article</article>
  <nav id="mainNav">Nav</nav>
  <div id="siteAds">Ads</div>
  <footer id="pageFooter">Footer</footer>
</body>