Take the 2-minute tour ×

On my site I have multiple images with the same height but with three different widths. And I want to display these in a nice grid. When an image is uploaded I check if the image should be wide or tall.

I then have three different sizes for images s, m & l

s for tall images and m & l for wide images.

These images are displayed in a table where a small (s) image takes up 1 spot, medium (m) takes up 2 spots and large (l) takes up 3 spots. And there are 3 spots per row.

If I have maybe 8 images (4 tall and 4 wide) I want it to look like this (w = white-space):


instead of


This means that the first 3 images are just small images. And since I need a medium image for the second row then I strech one of the wide images to take up 2 spots. Then there is a tall image beside that one and the last three rows are just three wide images, one on each row.

I hope I explained this well enough.


Or let's say I've got 4 images 2 tall and 2 wide (w = white-space):

Instead of displaying it like this


I want it to look like this:

sm (or ms)
sm (or ms)

How do I make this work?

share|improve this question
What is your question and what have you tried to solve it? –  Ben D Sep 29 '12 at 16:56
My question is, how do I make it dynamically order my images like I showed with 8 images instead of just having first 4 tall images and then 4 wide images with white-space everywhere? –  Oskar Sep 29 '12 at 17:01
If you had 2 s` and 2 l`, you're going to have whitespace regardless... –  Korvin Szanto Sep 29 '12 at 17:21
Nope, if there are 2 wide & 2 tall images, the wide images scale to 2 m –  Oskar Sep 29 '12 at 17:52
add comment

1 Answer

up vote 3 down vote accepted

There are several libraries for this, the easiest is jQuery Masonry.

You could achieve what you want with minimal code because it's only variable widths rather than variable widths and heights, but might as well use a library that already handles this rather than spend the time yourself.

share|improve this answer
Thanks for the suggestion! Though I did end up using Wookmark –  Oskar Sep 30 '12 at 10:07
it doesn't look like wookmark handles horizontal alignment, but I might be wrong. –  Korvin Szanto Sep 30 '12 at 19:00
add comment

Your Answer


