Monday 22nd December 2014,
Maurizio Conventi

A Fluid Layout with jQuery Masonry

Maurizio June 5, 2012 Responsive design 23 Comments

This is my second post about Responsive Web Design (here my previous post about twitter bootstrap).

In this case I created an example of fluid layout using jQuery Masonry. Masonry is a really interesting jQuery plugin created by David DeSandro. Masonry allows you to create a dynamic layout in few minutes.

With Masonry I created an example of minimalistic layout for a blog/portfolio. I like it because dinamically it can be a 3 columns layout for big screens (desktop), 2 columns layout for middle size screens (tablets) and a single column layout for small size screens (smartphone).

Masonry is not a toolkit like twitter bootstrap but I think that it can be really useful to create a nice responsive website. What’s you favourite framework to create a web responsive layout?

Like this Article? Share it!

23 Comments

  1. Luka July 10, 2012 at 21:15

    Hi Maurizio,
    Thanks a lot for the responsive image grid!
    It’s very, very useful!
    Cheers!
    —Luka

  2. Bazinga November 24, 2012 at 04:36

    SOMEONE ENABLE INFINITE SCROL WITH THIS AMAZING THING.

  3. mik February 23, 2013 at 19:22

    hey,
    it looks really nice. I think I will use it (thanks to you!)

  4. Toby July 23, 2013 at 21:12

    Superb, thanks a lot!

  5. Mike August 16, 2013 at 13:43

    Have you tried having more than 1 container on the same page? I have been trying with no luck to this point.

    • Maurizio August 17, 2013 at 12:48

      Hi Mike,

      I’ve never tried that. Are you using the same container class?
      Probably you should try with different classes initializing masonry more times, one for each container.

      Do you see what I mean? Let me know ;)

  6. Poppin Wan September 25, 2013 at 11:59

    Hi,

    Really nice, thanks to you.

    How can i use it in 4 columns ?

    • Maurizio September 25, 2013 at 14:52

      Hi, you need just to change the min_width variable in the js and css files ;)

      Thanks!

  7. Billy Tran October 2, 2013 at 06:02

    Great, it’s very useful

  8. Tony Porto October 22, 2013 at 09:47

    This is excellent!!!! Thank you

  9. PLUM November 27, 2013 at 06:05

    Hey thanks Maurizio for showing this! This solves a lot of issues I had with scaling and responsiveness. May I use and tweak this for my own purposes?

    • Maurizio November 28, 2013 at 11:40

      Sure! Thanks ;)

      • Trixie August 14, 2014 at 22:47

        You write so holestny about this. Thanks for sharing!

  10. Placid November 27, 2013 at 19:22

    Really cool. thank you.

    Unfortunately it seems a bit buggy combined with infinitescroll. Did you already make it work?

    • Maurizio November 28, 2013 at 11:41

      Yes I did. What kind of problems are you having?

  11. Misa December 21, 2013 at 12:51

    i have problem with infinite scroll to, when new items apears they have css width, not width made from jquery. sory for my bad english.

  12. Aaron August 31, 2014 at 18:58

    Hi,
    Great use of Masonry, I’ve just a little query I’d like to get my head around… I want to use it for boxes, where maybe some of the boxes could be twice the width… Is there any scope for this?
    Aaron

    • Maurizio September 1, 2014 at 19:36

      You could try using classes in order to differentiate the boxes’ width. In that way based on the box’s class you calculate the proper width.

  13. JuLian November 28, 2014 at 05:17

    It’s very useful! Thank you!

Leave A Response