body { 
  display: grid;
  grid-template-areas: 
    "nav header header"
    "nav article aside"
    "nav footer footer";
  grid-template-rows: auto 1fr auto;  
  grid-template-columns: 20% 1fr 22%; 
  height: 100vh;
  }  
/* Stack the layout on small devices/viewports. */
/* @media all and (max-width: 575px) { */
 @media all and (max-width: 1100px) { 
  body { 
    grid-template-areas: 
      "header"
      "article"
      "aside"
      "nav"
      "footer";
    grid-template-rows: auto 1fr 70px 1fr 70px;  
    grid-template-rows: auto auto auto auto auto;  
    grid-template-columns: 1fr;
 }
}
/* https://www.bhalash.com/archives/13544803259 */
@media only screen 
    and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: portrait),
only screen
    and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: landscape) {
        body { 
    grid-template-areas: 
      "header"
      "article"
      "aside"
      "nav"
      "footer";
    grid-template-rows: auto 1fr 70px 1fr 70px;  
    grid-template-rows: auto auto auto auto auto;  
    grid-template-columns: 1fr;
 }
}
#pageHeader {
  grid-area: header; 
  }
#pageFooter {
  grid-area: footer;
  }
#mainArticle { 
  grid-area: article; 
}
#mainNav {  
  grid-area: nav; 
}
#sideBar
{ 
	grid-area:aside;
}