title: Adjust grid height to available screen without scrollbar
body: <p>What grid property should I use to keep the grid perfectly inside the screen?</p>
  
  <p>Using <code>height: 100vh;</code> on <code>.wrapper</code> adjusts the height, but it introduces the scrollbars. To remove the unwanted scrollbars, I tried setting <code>body{margin:0;}</code> but I want to have a margin surrounding the entire grid without producing the scrollbars. I'm sure this is an easy fix, but please help me!</p>
  
  <p>Codepen: <a href="https://codepen.io/reiallenramos/pen/yzroxe" rel="nofollow noreferrer">https://codepen.io/reiallenramos/pen/yzroxe</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>html,
  body {
    height: 100%;
    width: 100%;
  }
  
  body {
    background-color: lightcyan;
  }
  
  .wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-gap: 8px;
    height: 100vh;
  }
  
  .wrapper&gt;div {
    background-color: #eee;
  }
  
  .wrapper&gt;div:nth-child(odd) {
    background-color: #ddd;
  }
  
  .item1 {
    grid-column: 1/2;
    grid-row: 1/5;
  }
  
  .item2 {
    grid-column: 2/3;
    grid-row: 1/3;
  }
  
  .item3 {
    grid-column: 3/5;
    grid-row: 1/3;
  }
  
  .item4 {
    grid-column: 2/4;
    grid-row: 3/5;
  }
  
  .item5 {
    grid-column: 4/5;
    grid-row: 3/6;
  }
  
  .item6 {
    grid-column: 1/3;
    grid-row: 5/7;
  }
  
  .item7 {
    grid-column: 3/4;
    grid-row: 5/7;
  }
  
  .item8 {
    grid-column: 4/5;
    grid-row: 6/7;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="item item1"&gt;1&lt;/div&gt;
    &lt;div class="item item2"&gt;2&lt;/div&gt;
    &lt;div class="item item3"&gt;3&lt;/div&gt;
    &lt;div class="item item4"&gt;4&lt;/div&gt;
    &lt;div class="item item5"&gt;5&lt;/div&gt;
    &lt;div class="item item6"&gt;6&lt;/div&gt;
    &lt;div class="item item7"&gt;7&lt;/div&gt;
    &lt;div class="item item8"&gt;8&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>