title: Row not taking 100% height in css-grid
body: <p>I want to create a page which has <code>Bootstrap</code>'s <code>navbar</code> and <code>css-grid</code>'s layout. </p>
  
  <p>At the top level, I have created a <code>css grid</code> with 1 column and two rows. I want the grid to contain 2 rows. The height of the first row should be the same as the height of bootstrap's nav bar. The height of the 2nd row should occupy all the remaining space in the page. </p>
  
  <pre><code>.css-grid-container-common-styles{
      height:100%;
      display: grid;
      grid-template-columns: 1fr; 
      grid-template-rows: auto auto; /* with height = 100%, I want that height for nav is calculated and assigned to row 1, remaining height is assigned to row 2*/
  }
  </code></pre>
  
  <p>Bootstrap's navbar goes in the 1st row spanning all columns</p>
  
  <pre><code>.css-grid-item-nav-div{
      grid-column: 1 / -1;
      grid-row: 1 / 2;
      border: 3px solid black;
  }
  </code></pre>
  
  <p>A button goes in the 2nd row but the row should take all the remaining available space.</p>
  
  <pre><code>.css-grid-item-login-div{
      grid-column: 1 / -1;
      grid-row: 2 / -1;
      border: 3px solid black;
  }
  </code></pre>
  
  <p><strong>Problem - the 2nd row's height is equal to the height of the button. How do I make it take up all the remaining space?</strong></p>
  
  <p>Full code - HTML/CSS</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.body-common-styles {
    background: linear-gradient(45deg, #33b1f8 37%, #6e90f6 100%);
    /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
    color: white;
    font-family: Helvetica;
    line-height: 1;
  }
  
  .div-common-styles {
    background-color: #0F2148;
  }
  
  .button-common-styles-normal {
    /*background: radial-gradient(ellipse,#268ff4 5%,#4da3f8 95%);  */
    background-color: #4da3f8;
    border: none;
    color: white;
    border-radius: 8px;
    width: 100px;
    /* sets the width of the content area to 200 px */
    height: 40px;
    box-sizing: border-box;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  
  .button-common-styles-normal:hover {
    background-color: #268ff4;
  }
  
  .center-horizontally-common-styles {
    display: block;
    margin: auto auto;
  }
  
  .centre-vertical-common-styles {
    position: fixed;
    left: 50%;
    /*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
    top: 50%;
    /* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
    transform: translate(-50%, -50%);
  }
  
  .centre-button-vertical-common-styles {
    position: absolute;
    left: 50%;
    /*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
    top: 50%;
    /* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
    transform: translate(-50%, -50%);
  }
  
  .debug-border-common-styles {
    border: 3px solid black;
    height: 200px;
    width: 400px;
  }
  
  .css-grid-container-common-styles {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    /*one column for nav*/
    grid-template-rows: auto auto;
  }
  
  .css-grid-item-nav-div {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    border: 3px solid black;
  }
  
  .css-grid-item-login-div {
    grid-column: 1 / -1;
    grid-row: 2 / -1;
    border: 3px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="css-grid-container-common-styles"&gt;
    &lt;nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item-nav-div"&gt;
      &lt;button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation"&gt;
           &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
           &lt;/button&gt;
      &lt;a class="navbar-brand" href="index.html"&gt;CodingJedi&lt;/a&gt;
      &lt;div class="collapse navbar-collapse justify-content-between" id="navbar1"&gt;
        &lt;ul class="navbar-nav"&gt;
          &lt;li class="nav-item active"&gt;
            &lt;a class="nav-link" href="index.html"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="widgets.html"&gt;About&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
    &lt;div&gt;
      &lt;div class="css-grid-item-login-div"&gt;
        &lt;button type="button" class="button-common-styles-normal"&gt; Click Me! &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>