Achieve a layout that fits rows yet still fills vertical whitespace?

[benjamincharity]

I was recently shown a (seemingly) super-simple layout. I have had two top notch developers say it’s not possible now and that just makes me all the more determined to find a way.

I need to create this:
And I can’t figure out how without getting crazy with JS to measure whitespace etc.

Any ideas?

[noahgelman]

1st thing, it’s totally possible. There’s always a way to do it.

2nd, some details. Is this supposed to be dynamic? Are things of different sizes being fed in somehow where you don’t always know the height/width values? Or is it static where you just need once instance of it and it’s all just a matter or css and positioning?

[noahgelman]

Instead of actual “rows” it seems he just wants to get as many images as possible in a certain amount of space while the images have a certain amount of margin between them. Seems very doable, I actually think there is already plugin that does exactly that

[TheDoc]

Yea, not possible with CSS alone. But the link that wolfcry911 posted will do the job perfectly.

[noahgelman]

Yup, that’s the one. You saying two top notch developers saying it’s not possible is worrisome for some reason.

[benjamincharity]

The height and width of each image is unknown until the image is loaded.

Masonry does not actually do this naturally to my knowledge. Neither does Isotope.

With a sort of hack I was able to make it possible by setting Masonry’s column width to 20px. It works, but definitely does feel like an ugly hack.

[Author]

Posts