Arrange images having different heights in a grid

Question

I have to display 10 images that goes by row. For example:

1 2 3 4

5 6 7 8

9 10

(The number is the images)

With these images, I want to remove any white space between 2 images.

Currently, I am using column-count of CSS, but the images still have the gap between the rows.

How can this gap be removed ?

(P.s.: The issue is that all the images have different heights, so what happens is that the area taken by an image is dependent upon the maximum image height for that row)

I want to resolve it only using CSS without any JS.

HTML Code:

<div class="container photos-container">
  <img class="col-lg-3" src="1">
  <img class="col-lg-3" src="2">
  <img class="col-lg-3" src="3">
  <img class="col-lg-3" src="4">
  <img class="col-lg-3" src="5">
  <img class="col-lg-3" src="6">
  <img class="col-lg-3" src="7">
  <img class="col-lg-3" src="8">
  <img class="col-lg-3" src="9">
  <img class="col-lg-3" src="10">
</div>

Current result:

Expected result:

Answer 1

You can try css-grid. Now it's widely supported by all browsers.

.container{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0px;
}
img{
  max-width: 100%;
}

<div class="container">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
</div>

Edit: If you want to use images with different heights, use inline-flex

.container{
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 500px;
  align-content: flex-start;
}
img{
  width: 25%;
  margin: 2px;
}

<div class="container">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="https://i.pinimg.com/originals/f7/7d/27/f77d274f5d81536c67d14fb8b93d3a29.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">


  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
    <img src="https://i.pinimg.com/originals/f7/7d/27/f77d274f5d81536c67d14fb8b93d3a29.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
  <img src="http://www.frankieballard.com/sites/g/files/g2000005856/f/Sample-image10-highres.jpg" alt="">
</div>