How to make the images in a grid to fill 100% of a parent element?

Question

I'm trying to adjust the images inside parent container to fill 100% available space, but I always end with a little space below the last image.

I would like to get rid of a red background by filling available space with the images. Photos have different sizes and aspect ratio... Any ideas?

This is what I want to achieve:

My code:

.home-photos-grid {
  width: 1200px;
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  margin-bottom: 0;
  background: #D33383;
}

.home-photos-grid .post-image {
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 100%;
  float: left;
}

.post-image img {
  width: 100%;
}

@media only screen and (min-width: 740px) {
  .home-photos-grid {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

<div class="home-photos-grid">
  <div class="post-image">
    <img src=" https://unsplash.it/500?image=123&gravity=east" />
  </div>
  <div class="post-image">
    <img src="https://picsum.photos/500/400/?image=70" />
  </div>
  <div class="post-image">
    <img src="https://picsum.photos/500/400/?image=50" />
  </div>
  <div class="post-image">
    <img src="https://picsum.photos/500/400/?image=60" />
  </div>

</div>

Thanks!

https://stackoverflow.com/a/31445364/3597276 – Michael Benjamin Jan 28 '18 at 22:46 — Michael Benjamin, Jan 28 '18 at 22:46

JasonB · Answer 1 · 2018-01-27T17:44:12.033

You are seeing white space between the images. Add font-size: 0; to the parent container, .home-photos-grid; and the gaps between the images will disappear.

To achieve this sort of layout where your images will automatically stretch to fill the bottom gap requires manual intervention. Even packery, masonry, and the like will not be able to magically make a decision as to which image should break out of its flow.

You could use js to measure the height of the gap, remove that much height from the div and set overflow hidden.

Another idea, is to set a background image that covers the bottom of the div so it appears to fill the gap.

.home-photos-grid {
  width: 1200px;
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  margin-bottom: 0;
  background: #D33383;
  font-size: 0;
}

.home-photos-grid .post-image {
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 100%;
  float: left;
}

.post-image img {
  width: 100%;
}

@media only screen and (min-width: 740px) {
  .home-photos-grid {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}

<div class="home-photos-grid">
  <div class="post-image">
    <img src=" https://unsplash.it/500?image=123&gravity=east" />
  </div>
  <div class="post-image">
    <img src="https://picsum.photos/500/400/?image=70" />
  </div>
  <div class="post-image">
    <img src="https://picsum.photos/500/400/?image=50" />
  </div>
  <div class="post-image">
    <img src="https://picsum.photos/500/400/?image=60" />
  </div>

</div>

Thanks for the hint about font-size: 0; . As for the rest of your answer - if I understood correctly the trick with a cover background image, I think that it won't work in my case, as I need my two bottom images to end exactly at the same point. On the other hand, js measuring the gap hight sounds promising but complicated + would probably cut important part of a bigger image. — Anda, Jan 27 '18 at 18:47
Right, you can just depend on the focal point of the image not getting massacred with that approach. :( For this to work without cropping images, you need the column width to be variable. The shorter column gets a little wider and the taller column gets a little thinner. — JasonB, Jan 27 '18 at 19:01

How to make the images in a grid to fill 100% of a parent element?

1 Answers1