How create grid out of images of different sizes?

Question

I'm trying to create a grid of images where all images of a row share the same height and where each row uses the same width.

How can I do this and what libraries can help me?

Solution 1

This type of grid are difficult to make by yourself so its better to not reinvent the wheel and use awesome libraries created by awesome people on the internet.

Checkout this links which are best for what you are looking for -- >

1. http://masonry.desandro.com/
2. http://css-tricks.com/seamless-responsive-photo-grid/

Also this link http://www.jqueryscript.net/tags.php?/grid%20layout/ has a variety of those image grid view libraries which may be useful ..

---

The CSS trick link is, in fact, a library free easy implementation. The idea is to set images width to 100% and divide your space into columns.

Here is a snippet extracted from the previous link:

function getRandomSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

var allImages = "";

for (var i = 0; i < 25; i++) {
  var width = getRandomSize(200, 400);
  var height = getRandomSize(200, 400);
  allImages += '<img src="https://placekitten.com/' + width + '/' + height + '" alt="pretty kitty">';
}

photos.innerHTML = allImages

.snippet-result-code {
  height: 500px
}

#photos {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 5;
  -webkit-column-gap: 0px;
  -moz-column-count: 5;
  -moz-column-gap: 0px;
  column-count: 5;
  column-gap: 0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media (max-width: 1000px) {
  #photos {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 800px) {
  #photos {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media (max-width: 400px) {
  #photos {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

body {
  margin: 0;
  padding: 0;
}

<section id="photos"></section>

Solution 2

CSS Grid frameworks work well. You can find a more detailed explanation on the website CSS Tricks. This is an example that could work for the images above. (And here is my JSFiddle result).

/*grid container*/

 .container {

          display: grid;
          padding:60pt;
          grid-template-columns: 25% 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 25%;  
          /*adjust outer values if you want less padding on the sides, 
           in jsfiddle I used 5% */
          grid-template-rows: 10% 300pt 250pt 10%;
          grid-column-gap: 10px;
          grid-row-gap: 5px;

        }

    .container div img { width: 100%;
                         height: 100%;
                         }

/*image div classes*/

    .main_1 {
      grid-area: main_1;
      grid-column:2/5;
      grid-row: 2/3; 
    }

    .main_2 {

      grid-area: main_2;
      grid-column:5/8;
      grid-row: 2/3;
    }

    .main_3 {
      grid-area: main_3;
      grid-column:8/11;                                          
      grid-row: 2/3;
    }

    .main_4 {
      grid-area: main_1;
      grid-column:2/4;
      grid-row: 3/4;
    }

    .main_5 {
      grid-area: main_2;
      grid-column:4/7;
      grid-row: 3/4;
    }

    .main_6 {
      grid-area: main_3;
      grid-column:7/11;                                           
      grid-row: 3/4; 
    }

Comments

[danijar]

Can't you just link to an image or screenshot? I cannot see which effect you are looking for on the page you linked. Are you referring to how the Google Image search results are laid out so that images with different dimensions fit into one grid?

[serge]

look

[danijar]

Alright, I included that in your question.

[danijar]

It's actually not that difficult to do it yourself (I am not suggesting that). Create say five columns. Evenly fill them with images that get resized to fit the column width. You don't even need JavaScript for that.

[serge]

@danijar can u say more?

[danijar]

@serge The grid layout you want is a bit more complicated because it consists of rows instead of columns. Columns often don't need to align horizontally, like on Pinterest. But you want rows that fit the full width which is only possible by cropping the images.

[Ulysse BN]

So if you have a bunch of images (say a thousand) this becomes impossible