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:

Please share the HTML and CSS that you have come up with so far. — Diego Fortes, Apr 07 '18 at 01:58
@PossessWithin code posted, btw, i tried column-count but it did not order properly — S K, Apr 07 '18 at 02:06
@SK What would you like to happen with images of differing height? You never specified that. — jhpratt, Apr 07 '18 at 02:19
You should be looking for a masonry layout, as this isn't a grid. — jhpratt, Apr 07 '18 at 02:23
**Search**. There are plenty of examples of masonry layouts. — jhpratt, Apr 07 '18 at 02:24
@jhpratt any help on that, because i could not find any example to do such a behaviour — S K, Apr 07 '18 at 03:38
what is error ? check my answer i add some instruction.. or you can check this example online https://www.epicwebs.co.uk/jquery-tutorials/quick-and-easy-jquery-masonry-tutorial/ — Kamalesh M. Talaviya, Apr 07 '18 at 04:16
@devloperkt actually i want to do it without jquery because i am actually doing the web app in angular 5 — S K, Apr 07 '18 at 04:27
ok , but you can check this may this answer related to your topic https://stackoverflow.com/questions/42281442/angular-2-and-masonry-grid-third-party-library , see ya — Kamalesh M. Talaviya, Apr 07 '18 at 04:35

Syam Pillai · Answer 1 · 2019-06-24T16:14:25.267

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>

this shows images column wise in the order of html, i want it to be row wise — S K, Apr 07 '18 at 03:39
You can make it row wise if you change flex-direction from column to row. — CaptainCsaba, Mar 16 '23 at 18:11

Kamalesh M. Talaviya · Answer 2 · 2018-04-07T04:09:56.783

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>

Nice! But OP stated he wants a CSS only solution. – Diego Fortes Apr 07 '18 at 04:49 — Diego Fortes, Apr 07 '18 at 04:49
i apologize for that – Kamalesh M. Talaviya Apr 07 '18 at 04:56 — Kamalesh M. Talaviya, Apr 07 '18 at 04:56

score 0 · Answer 3 · edited Apr 07 '18 at 04:48

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

Nope. If you do like `img{max-width:250px; width:100%};` it will force all images to 250px of width regardless of their natural width. — Diego Fortes, Apr 07 '18 at 02:11
sorry i meant does it work only with images of same height ?? — S K, Apr 07 '18 at 02:12
Nope. You can try by yourself. Make sure to add the CSS property `vertical-align` to `figure` though, so it can be aligned in the bottom, top, or wherever you want. — Diego Fortes, Apr 07 '18 at 02:13
Are you trying to achieve a Masonry effect? https://www.beacontechnologies.com/blog/2016/11/pure-css-masonry-layout/ — Diego Fortes, Apr 07 '18 at 02:18
does the order remain according to row wise with masonry layout ? — S K, Apr 07 '18 at 02:27

score 0 · Answer 4 · answered Jun 16 '21 at 20:04

0

#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;  
}

answered Jun 16 '21 at 20:04

hotProspect

1

Welcome to StackOverflow. While your code snippet may answer the question, providing additional context regarding why and/or how your code snippet works improves its long-term value. – Sven Eberth Jun 16 '21 at 22:31

Arrange images having different heights in a grid

4 Answers4