I’m trying to get my head around working with responsive webdesign (by column stacking) and I’m currently using this grid for my layouts: http://www.responsivegridsystem.com/ which I think works quite neat.
Only thing I’m running my head the wall with is to make it “smart enough” to also try and fit my columns by their height. What I have so far is this: http://gridtest.uconsult.dk/ and what I’m looking for is this: http://gridtest.uconsult.dk/gridheight.png so that the grid is trying to fit the rows by their height aswell as the column count.
Is this possible in some way? 🙂 Should I by using some other grid for this or do I have to make up some hacky javascript to achieve what I want?
Thanks in advance.
Don’t reinvent the wheel! David DeSandro already put out a couple jquery plugins that will do this for you. Masonry was the first one and works very well, and Isotope is the newer version that expanded on the original thinking along with additional features like sorting. Both will do a good job of creating the dynamic grid system you’re hoping for.