Masonry vertical fill before horizontal

Wouter125 Published at Dev

Wouter125

I'm building a masonry grid which needs to have the following output:

But the problem is masonry is going to fill horizontal space first and after that it's going to fill the vertical spacing. So the first part is going good with masonry but the second part isn't.

Item 4 and item 5 are going to be placed next to each other and item 6 is going to be set below it.

The width of my container needs to be 100% and the items need to be fluid. So I'm using a percentage grid. I can't stick with a fixed one!

I've already tried the following:

http://output.jsbin.com/zojivodosu

As you can see in that jsbin the problem persists there. Is there anyway I can fill out vertical space and after that horizontal space?

I don't want to customize my HTML if that's possible. Thanks in advance.

Kind regards,

Wouter

potatopeelings

The latest recommendation seems to be to use masonryHorizontal in Isotope (Isotope is commercial) - see https://github.com/desandro/masonry/issues/389

You can try using masonryHorizontal in Isotope. See http://isotope.metafizzy.co/demos/layout-modes.html and http://isotope.metafizzy.co/docs/layout-modes.html

The 2nd link is the one that works currently

There's a fork that does this - see https://github.com/desandro/masonry/pull/41. This is from 2010, so it is difficult to tell if it will break anything else.

Collected from the Internet

Please contact [email protected] to delete if infringement.