sample

＜body> 
＜header>header..＜/header>

＜article>article..＜/article>

＜nav>nav..＜/nav>

＜side>side..＜/side>

＜footer>footer..＜/footer>

＜main>○○＜/main>
＜/body>

＜style>
body{
   margin: 5px;
   width: 1125px; 
   background: pink;
    display: grid;
     grid: "h h h"
             "a b c"
             "f f f";
     grid-template-columns: auto 1fr 20%; 
}
header{
    width: 1200px; 
    grid-area: h;
    background: #aaa;
    border-radius:10px 10px 0 0;
}
article{ 
  background: #993366;
  grid-area: b; 
  min-width: 700px;   /*12em*/  
}
nav{ 
   background: #CC0066;
  grid-area: a;    /* auto min-width */ 
}
side{ 
 background: #CC3333;
  grid-area: c; 
  min-width: 300px;     /*12em*/
}
footer {
    width: 1200px; 
    grid-area: f;
    background: #aaa;
    font-size: 1.5em;
    position: center;
    border-radius: 0 0 10px 10px;
}
＜/style>