title: Span width of parent div using CSS Grid
body: <p>How do I get my <code>.inner-container</code> divs to span the <code>width</code> and <code>height</code>  of the parent content div? <a href="https://codepen.io/centem/pen/EeaMEz" rel="nofollow noreferrer">codepen</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    height: 100%;
    display: grid;
    grid-gap: 3px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 40px 40px 40px;
    grid-template-areas: "m h h" "m c c" "m f f";
  }
  
  .inner-container {
    height: 100%;
    display: grid;
    grid-gap: 2px;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: auto auto;
    grid-template-areas: "one two" "three four"
  }
  
  .header {
    grid-area: h;
    background-color: #2b9083;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .menu {
    grid-area: m;
    background-color: #ff66cc;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .content {
    grid-area: c;
    background-color: #66ccff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .footer {
    grid-area: f;
    background-color: #65704e;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .quadrant-one {
    grid-area: one;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightgray;
  }
  
  .quadrant-two {
    grid-area: two;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightgray;
  }
  
  .quadrant-three {
    grid-area: three;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightgray;
  }
  
  .quadrant-four {
    grid-area: four;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightgray;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="header"&gt;HEADER&lt;/div&gt;
    &lt;div class="menu"&gt;MENU&lt;/div&gt;
    &lt;div class="content"&gt;
      &lt;div class="inner-container"&gt;
        &lt;div class="quadrant-one"&gt;I&lt;/div&gt;
        &lt;div class="quadrant-two"&gt;II&lt;/div&gt;
        &lt;div class="quadrant-three"&gt;III&lt;/div&gt;
        &lt;div class="quadrant-four"&gt;IV&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="footer"&gt;FOOTER&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>