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


    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.

    2011, 20, 2.0

    Jan 30th 2011

    Hello world!

    So here are the stats: It’s 2011, I’ve been 20 for 6 days now and this is the version 2.0 of this unagi filled portfolio. Oh how I like the number 2.

    Wait, what? You don’t know me? Sorry, I forgot to introduce myself. My name is Victor Abadio, I already told you my age, I’m an Art Director based in Brazil. Since this is my first post here ever, let me tell you what you need to know about me: I’m obsessed with tennis (although I can barely play), I work 24/7/365, I watch way too many tv shows and I hate smoking – and smokers.

    … Now to what you’re really here about: this is my blog, which I only did it because Twitter isn’t enough anymore for what I have to say and share. Don’t worry, I won’t comment that much on Maria Sharapova’s loses here. I’ll share my thoughts on the news of the webdesign world, tell you all about exciting work experiences and I’ll try to do some tutorials as well.

    So, that’s it for now. Oh, since you’re here, would you mind telling me what you think about this new design? Just leave a comment and we’re good.