search

DrewDahlman / Mason

Mason.js for creating a perfect grid with jQuery.
http://masonjs.com/
MIT License
1.22k stars 184 forks source link

Overlap between rows? #32

Closed dungeonjumper closed 9 years ago

dungeonjumper commented 9 years ago

I've played around with the code a bit but maybe someone who is more familiar can help me out. I have a grid of various squares with 3 different sizes at a 1:2:3 ratio. Right now I am using the 2x and 3x grids in the container with the 1x grids as filler content - it looks great width-wise, but I would like more flow length-wise.

For example, from masonjs.com: http://i.imgur.com/CSM7Icj.png technically "big" at the bottom can fit (width-wise) within the two elements above it. Is there any way to make that possible?

This is what I have so far: http://i.imgur.com/qg5TaZO.png but I would like large3 to fit into the space that large2, short20, and short19 are occupying. Here is a mockup of what I am trying to achieve: http://i.imgur.com/gzAKNMf.png

Is this possible? Thanks!

ayozebarrera commented 9 years ago

I think you can achieve that just changing the order of the elements in the DOM