Masonry vertical fill before horizontal

Question

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

Ere

Why would you need Masonry to do this? if its going to be a consistent odd even with one big element and 2 smaller vertical elements then use normal CSS (no need to use a giant library). example: jsfiddle.net/4v5py8kc – Societal

That's what I had coded myself aswell already. But I wanted more flexibility. These are the ones that I can't achieve with masonry. But besides these 2 I have some other layouts as well that are going to be between those two :) – Ere

Answer 1

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.

Uneventful

Not really the solution I was looking for. It's only using the horizontal solution if there isn't enough space to place it vertical. So It will be placing everything vertical as soon as there is vertical space! Thanks tho. I'll stick to my first solution and will try to find another way out! Will give you an upvote for the effort :) I can't work with fixed value's everything needs to be relative! – Ere