How to make div height equal to width in CSS Grid

Question

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.
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.

Here is a Live example: https://www.w3schools.com/code/tryit.asp?filename=FMCULIDQUOBX

Here is the 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;}

...............................

<div class="container">
  <div class="gallery">

    <div class="thumbnail">
      <a href="large-image.jpg">
        <img src="thumbnail-image.jpg">
      </a>
    </div>
    <div class="thumbnail">
      ...... same as above ......
    </div>
    <div class="thumbnail">
      ...... same as above ......
    </div>
    <div class="thumbnail">
      ...... same as above ......
    </div>

  </div>
</div>

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.
If Images don't load, the thumbnail div wont even be visible.
In other words, if you disable images in browser, thumbnail div should take space in a square shape.
How to fix this? Thanks

Answer 1

I'm not sure how to do it with css grid but I know how to make .thumbnail maintain it's ratio.

I learnt this trick a while ago and I use it all the time since then.

.thumbnail{
   position: relative;
}
. thumbnail:before{
    content: ' ';
    display: block;
    width: 100%;
    padding-top: 100% \* Percentage value in padding derived from the width  *\
}
.thumbnail > img{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

Answer 2

The solution is to add an invisible square element (zero width and 100% bottom padding) to the grid, set equal height to all rows by grid-auto-rows: 1fr ; and then reposition the invisible grid element as well as the first grid element to overlap.

So, your css file should look as the following:

.container {max-width: 900px;}

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 15px;
}

.gallery::before {
    content: '';
    width: 0;
    padding-bottom: 100%;
    grid-row: 1 / 1;
    grid-column: 1 / 1;
}

.gallery > *:first-child{
    grid-row: 1 / 1;
    grid-column: 1 / 1;
}

.thumbnail {box-shadow: 0 4px 4px rgba(0,0,0,0.50);}

img {width: 100%; display: block;}

Answer 3

The big advantage is that CSS grid by default applies a similar height to its children.

Option is to restructure the HTML and reduce markup (HTML). You can add height to the .gallery class to make it look more square.

 .container {max-width: 900px; margin:0 auto;} .gallery { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 15px; } .thumbnail {display:block; box-shadow: 0 4px 4px rgba(0,0,0,0.50);} img {display:block; width:100%; height: auto;} 

  <div class="container"> <div class="gallery"> <a class="thumbnail" href="https://static.pexels.com/photos/54278/pexels-photo-54278.jpeg"> <img src="https://static.pexels.com/photos/54278/pexels-photo-54278.jpeg"> </a> <a class="thumbnail" href="https://static.pexels.com/photos/242276/pexels-photo-242276.jpeg"> <img src="https://static.pexels.com/photos/242276/pexels-photo-242276.jpeg"> </a> <a class="thumbnail" href="https://static.pexels.com/photos/54278/pexels-photo-54278.jpeg"> <img src="https://static.pexels.com/photos/54278/pexels-photo-54278.jpeg"> </a> <a class="thumbnail" href="https://static.pexels.com/photos/242276/pexels-photo-242276.jpeg"> <img src="https://static.pexels.com/photos/242276/pexels-photo-242276.jpeg"> </a> <a class="thumbnail" href="https://static.pexels.com/photos/54278/pexels-photo-54278.jpeg"> <img src="https://static.pexels.com/photos/54278/pexels-photo-54278.jpeg"> </a> <a class="thumbnail" href="https://static.pexels.com/photos/242276/pexels-photo-242276.jpeg"> <img src="https://static.pexels.com/photos/242276/pexels-photo-242276.jpeg"> </a> <a class="thumbnail" href="https://static.pexels.com/photos/54278/pexels-photo-54278.jpeg"> <img src="https://static.pexels.com/photos/54278/pexels-photo-54278.jpeg"> </a> <a class="thumbnail" href="https://static.pexels.com/photos/242276/pexels-photo-242276.jpeg"> <img src="https://static.pexels.com/photos/242276/pexels-photo-242276.jpeg"> </a> </div> </div>