When I first had the idea for my new portfolio (this website, in case you don’t know) the first thing I did was experiment. And I got nothing but gray hair from it.
Then I googled around to see if it was possible to create such a grid. I knew it was a common problem for developers and that it was indeed possible because I had seen many websites with these kind of grid, what I wanted to know was if it was possible for us, human ones.
I couldn’t find much helpful stuff on my research. I tried “vertically fluid list”, “vertical list with no gaps”, “God please help me I’m going crazy”. Until, one day, I landed at a website that had this awesome aligned list and – being how curious and desperate I was at the time – I looked up the code and find out that it was Jquery who as doing all the magic.
The plugin behind it was Masonry, by David DeSandro. I followed the link to it → http://desandro.com/resources/jquery-masonry/, and smiled. Life was good again. This plugin was my life – and time – saver. It met my needs perfectly, vertically aligning my set of divs. To quote the author:
“Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid.”
The only problem is that the plugin fills up the biggest gaps first, it doesn’t necessarily follow the markup order. Where you have Div1 – Div2 – Div3 – Div4, it may arrange elements where the result would be Div1 – Div2 – Div4 – Div3. Allow me to illustrate it:
This wasn’t a problem for me. In fact, it only made things more interesting. But if you have to respect the markup order, it might not be what your looking for.
So that was my tip. I hope you find it useful. Also, I want to give and shout and a big THANK YOU to David DeSandro, my latest hero (You guys should check out his portfolio).
Did you use this plugin? Do you have an alternate solution for this problem? Care to comment? The comment box is wide open and I’d like to hear your opinion. Bye, for now.