title: How to make div height equal to width in CSS Grid
body: <p>I am using CSS Grid to layout a thumbnail gallery, no Javascript or any other responsive techniques. I would like to set the height of thumbnails to be as its width (1:1) square ratio.<br>
  Why? when the page loads I need the thumbnail div's to take space, because now if there is no Image inside the thumbnails div it doesn't take any space.<br></p>
  
  <p>Here is a Live example: <a href="https://www.w3schools.com/code/tryit.asp?filename=FMCULIDQUOBX" rel="noreferrer">https://www.w3schools.com/code/tryit.asp?filename=FMCULIDQUOBX</a>
  <br></p>
  
  <p>Here is the Code:<br></p>
  
  <pre><code>.container {max-width: 900px;}
  .gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 15px;
  }
  .thumbnail {box-shadow: 0 4px 4px rgba(0,0,0,0.50);}
  img {width: 100%; display: block;}
  </code></pre>
  
  <p>...............................</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="gallery"&gt;
  
      &lt;div class="thumbnail"&gt;
        &lt;a href="large-image.jpg"&gt;
          &lt;img src="thumbnail-image.jpg"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="thumbnail"&gt;
        ...... same as above ......
      &lt;/div&gt;
      &lt;div class="thumbnail"&gt;
        ...... same as above ......
      &lt;/div&gt;
      &lt;div class="thumbnail"&gt;
        ...... same as above ......
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The Code above divides the width (900px) into four fractions, and the 4 thumbnails are placed in 1 row. That's why I don't define any width.<br>
  If Images don't load, the thumbnail div wont even be visible.<br>
  In other words, if you disable images in browser, thumbnail div should take space in a square shape.<br>
  How to fix this? Thanks</p>