absolutely positioning grid items 1 (Interactive Example)

<!doctype html>
<title>Example</title>
<style>
body { 
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav article ads"
    "nav footer footer";
  grid-template-rows: 50px 1fr 50px;  
  grid-template-columns: 20% 1fr 15%;
  grid-gap: 10px;
  height: 100vh;
  margin: 0;
  }  
#pageHeader, #pageFooter, #mainArticle, #mainNav, #siteAds {
  padding: 1em;
  background: gold;
  }
#pageHeader {
  grid-area: header;
  }
#pageFooter {
  grid-area: footer;
  }
#mainArticle { 
  grid-area: article;     
  position: relative;
  }
#mainNav { 
  grid-area: nav; 
  }
#siteAds { 
  grid-area: ads; 
  } 
#mainArticle > .phone {
  position: absolute;
  bottom: 0;
  right: 1vw;
  font-size: 3em;
}
</style>
<body>
  <header id="pageHeader">Header</header>
  <article id="mainArticle">
    Article
    <div class="phone">&phone;</div>
  </article>
  <nav id="mainNav">Nav</nav>
  <div id="siteAds">Ads</div>
  <footer id="pageFooter">Footer</footer>
</body>