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

#images-wrapper {    
   line-height: 0;       
    -webkit-column-count: 5;    
    -webkit-column-gap: 0px;    
     column-count: 5;    
     column-gap: 0px;    
}  
#images-wrapper img {    
   width: 100% !important;    
   height: auto !important;  
}  
#images-wrapper{    
   display:inline-block;    
   margin-right: auto;    
   margin-left: auto;  
}

Answer 2

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>

Answer 3

.container{
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    /* use font-size 0 to remove the 4px spacing naturally caused by display:inline-block on the children    */
    font-size: 0; 
}
.container figure{
    display: inline-block;
    max-width: 25%;
    width: 100%;
}
img{
    max-width: 100%;
}

<div class="container">
    <figure><img src="https://images.pexels.com/photos/325686/pexels-photo-325686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></figure>
    <figure><img src="https://images.pexels.com/photos/325686/pexels-photo-325686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></figure>
    <figure><img src="https://images.pexels.com/photos/325686/pexels-photo-325686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></figure>
    <figure><img src="https://images.pexels.com/photos/325686/pexels-photo-325686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></figure>
    <figure><img src="https://images.pexels.com/photos/325686/pexels-photo-325686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></figure>
    <figure><img src="https://images.pexels.com/photos/325686/pexels-photo-325686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></figure>
    <figure><img src="https://images.pexels.com/photos/325686/pexels-photo-325686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></figure>
    <figure><img src="https://images.pexels.com/photos/325686/pexels-photo-325686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></figure>
    <figure><img src="https://images.pexels.com/photos/325686/pexels-photo-325686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></figure>
    <figure><img src="https://images.pexels.com/photos/325686/pexels-photo-325686.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></figure>
</div>

You need to use display:inline-block; on each image and font-size:0 on the parent to remove the spacing. Here is a sample on Codepen:

Answer 4

you can use masonry.js to get this

• step 1 : link jQuery and then masonry in your page
• step 2 : and then all you need is images with diffrant height covered by div , first give same class name to all images that you want to show in grid and apply class to parent div of those images
• step 3 : put this code in you js file

Code :

jQuery(document).ready(function(){
    $('#here_its_id_of_parant_div').masonry({
        itemSelector: '.Image_class',
        columnWidth: 70
    });
});

example :

$( function() {

        $('#container').masonry({
            itemSelector: '.item',
            columnWidth: 70
        });

    });

body {
    font-family: sans-serif;
}

#container {
    border: 1px solid;
    padding: 5px;
}

.item {
    width: 60px;
    float: left;
    margin: 5px;
    background: #CCC;
}

.item.w2 {
    width: 130px;
}

.item.h2 {
    height: 130px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.1/masonry.pkgd.js"></script>
    <div id="container">
        <img class="item" src="https://fakeimg.pl/300/">
      <img class="item w2" src="https://fakeimg.pl/350x200/ff0000/000">
      <img class="item" src="https://fakeimg.pl/350x200/ff0000/000">
      <img class="item" src="https://fakeimg.pl/300/">
      <img class="item" src="https://fakeimg.pl/300/">
       <img class="item" src="https://fakeimg.pl/350x200/ff0000/000">
      <img class="item" src="https://fakeimg.pl/300/">
      <img class="item" src="https://fakeimg.pl/300/">
      <img class="item" src="https://fakeimg.pl/300/">
      <img class="item w2" src="https://fakeimg.pl/350x200/ff0000/000">
      <img class="item" src="https://fakeimg.pl/350x200/ff0000/000">
      <img class="item" src="https://fakeimg.pl/300/">
      <img class="item" src="https://fakeimg.pl/300/">
      <img class="item w2" src="https://fakeimg.pl/350x200/ff0000/000">
      <img class="item" src="https://fakeimg.pl/350x200/ff0000/000">
      <img class="item" src="https://fakeimg.pl/300/">
    </div>