Search code examples
javascripthtmlcssgridphoto-gallery

How create grid out of images of different sizes?

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

Solution

  • 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>