• Home
  • About
  • Work
  • Blog
  • Contact
  • blog

    How to have a perfect “vertically floated” grid layout

    Feb 12th 2011

    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.

    The problem illustrated

    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.”

    Genius.

    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:

    Display: block vs Masonry

    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.

    → 7 comments

    • Am I glad I found this post (by chance too). I was trying to implement something very similar on my photography site. I got it working nicely in Chrome but everything else was screwed. ie was more broken than others.
      The inconsistency of order of divs isn’t a problem as I’ll be snapping in images which have no obvious hierarchy or SEO relevance.
      Thanks for posting – useful

      Aaron on February 26th, 2011 at 05:52
    • Thank you so much for this tip… it looks great on your site…. hope to see more of this helpful entries..

      marco on August 11th, 2011 at 16:15
    • Boa postagem

      Eliseu on August 17th, 2011 at 15:15
    • Thanks a lot, I had this sketched on my notebook a few days ago and never had an clue of how to implement it. Looks good on your site.

      Thanks again, very helpful.

      Faris on November 23rd, 2011 at 13:34
    • Hi Victor,
      Beautiful layout, I’m actually working on a similar design myself and just happen to find your blog today.

      Happy Thursday!

      Sean K. Stewart on December 1st, 2011 at 18:09
    • Hey
      I am quite impressed by your creative work.May i know how to got that transition on your home page(image appear after that another appear from right side). Please
      Thanks

      Pallavi on December 19th, 2012 at 06:33
    • You rock. Thank you! I’ve been trying to firgue this one out for ages and kept coming up with notta from Visio help and Google searches, then happened across your blog just now and viola!

      Fedz on August 27th, 2015 at 07:51

    Sing a song,
    share your thoughts,
    leave a reply.