title: strange behaviour with css grid plus media querys
body: <p>I am trying to make a responsive grid section using media queries and CSS grid. The grid looks fine on full width but as soon as 999px and 750px media queries kick in I begin to have a strange problem where I have extra CSS grid gutters on the right and on the bottom of the grid.</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>.categories-grid &gt; .website-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
      "nails nails offers offers"
      "image image kids-img kids"
      "image image hair hair-img";
    gap: 40px 35px;
    height: 1060px;
  }
  
  @media only screen and (max-width: 999px) .categories-grid &gt; .website-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "nails nails"
      "kids-img kids"
      "hair hair-img"
      "offers offers";
    gap: 30px 25px;
    height: auto;
  }
  
  @media only screen and (max-width: 750px) .categories-grid &gt; .website-grid {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-template-areas:
      "nails"
      "offers"
      "kids-img"
      "kids"
      "hair-img"
      "hair";
  }</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/eKDb5.png" rel="nofollow noreferrer">max750px media query</a></p>
  <p><a href="https://i.stack.imgur.com/Dh1sN.png" rel="nofollow noreferrer">max999px media query</a></p>
  <p><a href="https://i.stack.imgur.com/Nl1DF.png" rel="nofollow noreferrer">full width</a></p>