html – Responsive thumbnail grid

I’m trying to create a responsive grid of thumbnails for a project. But no matter how I try to adapt it, I never end up with what I want. I have tried grid / flex / minmax / auto-fit / auto-fill and even old-fashioned css to achieve this.

The important part for me is to keep the thumbnail container at 180x300px or similar ratio when it responds. I have seen some sites that use this image format approach to make the thumbnails smaller and closer together if the window is changed. Not sure what this technique is called therefore, I am not able to search for it. The miniatures extend over their entire parent container, in this case a 100% wide container

Here’s some code I’m left with at this point.

<div class="container">
 <div class="entry" id="1"></div>
 <div class="entry" id="2"></div>
 <div class="entry" id="3"></div>
 <div class="entry" id="4"></div>
 <div class="entry" id="5"></div>
 <div class="entry" id="6"></div>
 <div class="entry" id="7"></div>
 <div class="entry" id="8"></div>
 <div class="entry" id="9"></div>
 <div class="entry" id="10"></div>
</div>

.container {
  display: flex;
  flex-wrap: wrap
}

.container > .entry {
  margin: 10px 5px 10px 5px;
  height: 300px;
  width: 180px;
  background: #fff;
}

Thanks for your help! 🙂

Leave a Comment