title: CSS Grid Layout to fill the parent container with a position fixed div
body: <p>In the following snippet I have a <code>position: fixed</code> div which is not part of the grid layout and I have a <code>row-1</code> and <code>main</code> grid rows.</p>
  <p>I would like the <code>main</code> to expand to the available space which I thought <code>grid-template-rows: 6rem 1fr</code> would do but it is not.</p>
  <p>I'd also like there to be less of gap between the rows but <code>grid-row-gap</code> is not working in this example.</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>html {
    scroll-behavior: smooth;
    height: 100%;
  }
  
  body {
    text-rendering: optimizeSpeed;
    height: 100%;
  }
  
  #root {
    height: 100%;
  }
  
  .container {
    border: 10px solid green;
    background: #f1f1f1;
    display: grid;
    align-items: center;
    grid-template-areas:
      "row-1"
      "main";
    grid-template-rows: 6rem 1fr;
    grid-row-gap: 0;
  }
  
  .fixed {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
    background: yellow;
    height: 3rem;
  }
  
  .row-1 {
    border: 10px solid blue;
    grid-area: row-1;
  }
  
  .main {
    border: 10px solid orange;
    grid-area: main;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Hello&lt;/title&gt;
      &lt;link rel="stylesheet" href="styles.css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;main id="root"&gt;
        &lt;div class="fixed"&gt;Fixed&lt;/div&gt;
        &lt;div class="container"&gt;
          &lt;div class="row-1"&gt;Row 1&lt;/div&gt;
          &lt;div class="main"&gt;main&lt;/div&gt;
        &lt;/div&gt;
      &lt;/main&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>