title: Does CSS Grid have a flex-grow function?
body: <p><strong>Is there an analog to <code>flex-grow</code> for the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid" rel="noreferrer">grid</a> property ?</strong></p>
  
  <p>I'd like my grid areas to accomodate the content they receive but have some areas take more place than others like <code>flex-grow</code> for <code>flex</code>. </p>
  
  <p>Practically, in the example below I'd like </p>
  
  <ul>
  <li>the <code>turquoise</code> to be invisible because it accomodates its content. </li>
  <li>The <code>footer</code> to be invisible as well because it has no content. </li>
  <li>The middle section take the remaining of the page like <code>flex-grow</code>.</li>
  </ul>
  
  <p>More practically, I'd like this code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ctnr {
    display: grid;
    min-height: 100vh;
    grid-template-areas:
      "header header"
      "nav main"
      "footer footer";
  }
  
  .test {
    background: black;
    height: 1rem;
  }
  
  header {
    grid-area: header;
    background: turquoise;
  }
  
  nav {
    grid-area: nav;
    background: grey;
  }
  
  main {
    grid-area: main;
  }
  
  footer {
    grid-area: footer;
    background: yellow
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="ctnr"&gt;
    &lt;header&gt;
      &lt;div class="test"&gt;&lt;/div&gt;
    &lt;/header&gt;
    &lt;nav&gt;&lt;/nav&gt;
    &lt;main&gt;&lt;/main&gt;
    &lt;footer&gt;&lt;/footer&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>To act like this code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ctnr {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  
  .panel {
    flex-grow: 1;
    display: flex;
  }
  
  header {
    flex-grow: 0;
    background: turquoise;
  }
  
  nav {
    min-width: 10rem;
    background: grey
  }
  
  footer {
    background: yellow
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="ctnr"&gt;
    &lt;header&gt;hey&lt;/header&gt;
    &lt;div class="panel"&gt;
      &lt;nav&gt;&lt;/nav&gt;
      &lt;main&gt;&lt;/main&gt;
    &lt;/div&gt;
    &lt;footer&gt;&lt;/footer&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Without</strong> the <code>div.panel</code> and without adding any additional tag. </p>
  
  <p>The reason I would like to do this, is a legitimate one, that extra <code>div</code> element is annoying me.</p>