How create grid out of images of different sizes?

serge picture serge · Mar 30, 2014 · Viewed 44.7k times · Source

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?

image grid

Answer

Vishal Nair picture Vishal Nair · Mar 30, 2014

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>