title: Display Grid Maximum Height Is Not Responsive
body: <p>I have setup a grid layout that I would like to use, but I cannot figure out how to set a max height for the grid's row and <strong>still have the row height scale down when the window is resized</strong>. I have tried adding <code>grid-auto-rows: minmax(auto, 500px);</code> which I thought was exactly what I needed. But this just keeps the height at 500px constantly even when scaling down the screen size. I would like the images to scale down responsively. Any help would be great!</p>
  <p><a href="https://jsfiddle.net/u8fd73gh/" rel="nofollow noreferrer">https://jsfiddle.net/u8fd73gh/</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>.grid {
    max-width: 700px; /* Adjusting the width doesnt scale the images bellow 500px */
    margin: auto;
    
    display:grid;
    grid-template-columns: repeat(2, 1fr);
  /*   grid-template-rows: repeat(5, minmax(auto,100px)); */
    grid-auto-rows: minmax(auto, 500px);
    column-gap: 20px;
    row-gap: 20px;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .box-2 {
    grid-area: auto / auto / span 2 / span 1;
  }
  .box-3 {
    grid-area: auto / auto / span 2 / span 1;
  }
  .box-5 {
    grid-area: auto / auto / span 2 / span 2;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
    &lt;div class="box box-1"&gt;
      &lt;img
        src="https://images.pexels.com/photos/3032049/pexels-photo-3032049.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"
        alt=""
      /&gt;
    &lt;/div&gt;
    &lt;div class="box box-2"&gt;
      &lt;img
        src="https://images.pexels.com/photos/3220558/pexels-photo-3220558.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=3&amp;h=750&amp;w=1260"
        alt=""
      /&gt;
    &lt;/div&gt;
    &lt;div class="box box-3"&gt;
      &lt;img
        src="https://images.pexels.com/photos/1567698/pexels-photo-1567698.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"
        alt=""
      /&gt;
    &lt;/div&gt;
    &lt;div class="box box-4"&gt;
      &lt;img
        src="https://images.pexels.com/photos/5778748/pexels-photo-5778748.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"
        alt=""
      /&gt;
    &lt;/div&gt;
    &lt;div class="box box-5"&gt;
      &lt;img
        src="https://images.pexels.com/photos/5827880/pexels-photo-5827880.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500"
        alt=""
      /&gt;
    &lt;/div&gt;
    
    &lt;div class="box box-1"&gt;
      &lt;img
        src="https://images.pexels.com/photos/3220558/pexels-photo-3220558.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=3&amp;h=750&amp;w=1260"
        alt=""
      /&gt;
      
    &lt;/div&gt;
    &lt;div class="box box-2"&gt;
      &lt;img
        src="https://images.pexels.com/photos/3032049/pexels-photo-3032049.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"
        alt=""
      /&gt;
      
    &lt;/div&gt;
    &lt;div class="box box-3"&gt;
      &lt;img
        src="https://images.pexels.com/photos/1567698/pexels-photo-1567698.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"
        alt=""
      /&gt;
    &lt;/div&gt;
    &lt;div class="box box-4"&gt;
      &lt;img
        src="https://images.pexels.com/photos/5778748/pexels-photo-5778748.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"
        alt=""
      /&gt;
    &lt;/div&gt;
    &lt;div class="box box-5"&gt;
      &lt;img
        src="https://images.pexels.com/photos/5827880/pexels-photo-5827880.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500"
        alt=""
      /&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>