Create height sensitive mesh elements

Question

I'm trying to figure out how to work with responsive web design (by stacking columns), and now I use this grid for my layouts: http://www.responsivegridsystem.com/ , which I think works pretty neatly.

Only that I run my head is to make it “smart enough” to try to fit my columns in height. What I still have is this: http://gridtest.uconsult.dk/ , and here's what I'm looking for: http://gridtest.uconsult.dk/gridheight.png so that the grid tries to fit the rows by their height as well as the number columns.

Is this possible in some way? :-) Do I have to use some other mesh for this, or do I need to compose a hacker javascript to achieve what I want?

Thanks in advance.

Answer 1

Do not reinvent the wheel! David DeSandro has already released a couple of jquery plugins that will do this for you. Masonry was the first and works very well, and Isotope is a newer version that has expanded in original thinking along with additional features such as sorting. Both will do the good job of creating the dynamic mesh you are hoping for.