title: Scaling Grid Item Height with Grid Item Width
body: <p>I'm making a grid layout that resizes various numbers of items (squares) with the width of the page and wraps items that don't fit on the same line to the next line down. </p>
  
  <p>I've tried lots of approaches like using vw and removing minmax, but nothing seems to get the result that I want. Here's the code currently:</p>
  
  <p>css:</p>
  
  <pre><code>.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  }
  
  .grid-item {
    background-image: url('../mood.jpg'); /*square image*/
    background-repeat: no-repeat;
    background-size: contain;
    align-content: center;
    color: black;
    height: 8rem;
  }
  
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="grid-container"&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
        &lt;div class="grid-item"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Right now it has some extra space to the right of the image and I want the height to scale to fit that extra space.</p>
  
  <p>Edit: <a href="https://codepen.io/iCodeCoolStuff/pen/ZNEoVZ" rel="nofollow noreferrer">Here's a pen</a> that more thoroughly shows the problem. The grid items aren't squares, they're rectangles and I want them to be squares.</p>