Neatly arrange different sized images into a grid

Question

I'm trying to arrange images into a neatly packed grid like in the screenshot. The images come from a CMS so they can be any size.

How can I make this work either using CSS or JS?

enter image description here

score 3 · Accepted Answer · edited May 23 '17 at 12:16

3

There are various layout js libraries already present like

You can check how to replicate pinterest.com's absolute div stacking layout

edited May 23 '17 at 12:16

Community

1
1

answered Jun 04 '15 at 05:39

Deadlock

1,575
1
19
34

I don't believe any of these provide the effect I want. My images can be any size but the images in these examples are always fixed width. 1/4 1/3 1/2 – stuartb Jun 04 '15 at 06:08
Check appended method in http://packery.metafizzy.co/methods.html images being inserted are of variable sizes, Direct codepen link http://codepen.io/desandro/full/HFbia – Deadlock Jun 04 '15 at 07:09
They're still using the same group of widths e.g. 20% 50% 100% etc. Thinking about this more is seems quite complicated or maybe even impossible. I'll just have to settle for using Packery. Thanks for your help! – stuartb Jun 05 '15 at 02:44

score 2 · Answer 2 · answered Jun 04 '15 at 05:56

2

Try this, hopefully this will help. Just you have to add the margin in between the images of your choice.

<div id="image-container">
    <img src="http://fakeimg.pl/300/">
    <img src="http://fakeimg.pl/250x100/">
    ...
</div>

#image-container {
  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; 
}

answered Jun 04 '15 at 05:56

aavrug

1,849
1
12
20

Great answer, once the container is full, is there a way to make the overflow scrolling vertical rather horizontal? (Assuming your container has a set width/height of say 300px X 300px) – MarzSocks Feb 24 '17 at 13:28

Neatly arrange different sized images into a grid

2 Answers2