Nesting Masonry objects

Question

I am trying to create a graph view using containers. So if: [A's -> B's -> C's] the view would show an objects c inside of Bs which are inside of As.

Something like this:

I think a masonry view is perfect for this but I can't get the nesting to work right.

Fiddle of what I have so far: http://jsfiddle.net/paulocoelho/5SxQ5/4/

I don't get why they are not alining. I also tried using CSS's column-count and column-gap but found the rendering to be extremely buggy.

Fiddle code coz I must...

var $container = $('.container');
$container.masonry({
    /*columnWidth: 200,*/
    itemSelector: '.eWrapper'
});

Answer 1

Consider this.

Remove itemSelector property - if the one is set Masonry will use not only children items but all descendants that match that selector. So, for the first container (motherContainer) Masonry would try to layout ALL .wrapper elements, include those in nested .container elements.

And the key point - call Masonry on the reverted array of .container elements. From the innermost to the outermost, because Masonry changes children elements' height leaving gaps in the parent container.

var $container = $('.container');
$($container.get().reverse()).masonry({});

Just give it a try. Here is a jsfiddle. I also added C elements.