CSS Grid Layout

<style>
  * {
    margin: 0;
    padding: 0;    
  }
  #wrapper{
    margin: auto;
    width: 90vw;
    display: grid;
    grid-template-areas:
        'b b b'
        'n n n'
        'l m r'
        'f f f';
    grid-template-rows: 10vh 5vh auto 5vh;
    grid-template-columns: 20vw auto 20vw;
  }
  #banner{ background-color: aqua; grid-area: b; }
  #nav { background-color: chocolate; grid-area: n; }
  #left_col{ background-color: greenyellow; grid-area: l; }
  #mid_col{ background-color: violet; grid-area: m; }
  #right_col{ background-color: sandybrown; grid-area: r; }
  #footer{ background-color: lightgray; grid-area: f; }
</style>

<div id="wrapper">
  <div id="banner">banner</div>
  <div id="nav">nav</div>
  <div id="left_col">left column</div>
  <div id="mid_col">middle column</div>
  <div id="right_col">right column</div>
  <div id="footer">footer</div>
</div>

try this:

1. put some content into left, middle and right columns. what happened to their:
   • widths
   • heights
2. create your own css grid layout with 2 columns, 1 header, 1 footer, both fixed column widths