24

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

SharpC
  • 6,974
  • 4
  • 45
  • 40
serge
  • 391
  • 1
  • 3
  • 9
  • 1
    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? – danijar Mar 30 '14 at 09:37
  • 1
    [look](http://postimg.org/image/t5y1ie1b3/) – serge Mar 30 '14 at 10:07
  • Alright, I included that in your question. – danijar Mar 30 '14 at 13:34

2 Answers2

24

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>
Ulysse BN
  • 10,116
  • 7
  • 54
  • 82
Vishal Nair
  • 2,141
  • 3
  • 26
  • 39
  • 2
    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. – danijar Mar 30 '14 at 09:48
  • @danijar can u say more? – serge Mar 30 '14 at 10:09
  • 1
    @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. – danijar Mar 30 '14 at 13:28
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; 
    }
Programina
  • 31
  • 6