title: CSS Grid - White space on the bottom and how to remove it
body: <p>I am trying to get a hold of the CSS Grid, a transition from previously using the Bootstrap that I'm used to.</p>
  <p>I created a simple layout (4 rows &amp; 6 columns) however, there is an unwanted whitespace on the bottom, causing a visible scroll.</p>
  <p>Is there a way to fix this without setting the exact height to the .container element?
  When I set the height to the .container (height: 500px), the problem goes away. Is this the way to go around it? I don't want to use a quick fix that will cause me a problem down the way maybe on smaller or larger viewports.</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>.grid{
    display: grid;
    position: relative;
    margin: auto;
    grid-template-areas:
      "nav nav nav nav nav nav"
      "logo logo logo logo logo logo"
      "main main main main main side"
      "footer footer footer footer footer footer";
  
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 50px 50px 1fr 1fr;
  }
  .nav{
    grid-area: nav;
    background-color:green;
  }
  .logo{
    grid-area: logo;
    background-color:salmon;
  }
  .main{
    grid-area: main;
    background-color:cadetblue;
    min-height: 800px;
    height: auto;
  }
  .side{
    grid-area: side;
    background-color:lightpink;
    min-height: 800px;
    height: auto;
  }
  .footer{
    grid-area: footer;
    background-color:sandybrown;
    height: 50px;
  }
  
  .overlap{
    background-color: hotpink;
    grid-area: 3/ 3/ 3/ 4;
    z-index: 5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;CSSGrid&lt;/title&gt;
      
      &lt;/head&gt;
    
      &lt;body&gt;
        &lt;div class="grid"&gt;
  
          &lt;nav class="nav"&gt;&lt;/nav&gt;
          &lt;div class="logo"&gt;&lt;/div&gt;
          &lt;div class="overlap"&gt;
            &lt;h3&gt;Overlap!&lt;/h3&gt;
          &lt;/div&gt;
          &lt;section class="main"&gt;&lt;/section&gt;
          &lt;aside class="side"&gt;&lt;/aside&gt;
          &lt;footer class="footer"&gt;&lt;/footer&gt;
  
        &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>