Monday 28th July 2014,
Maurizio Conventi

A Fluid Layout with jQuery Masonry

Maurizio June 5, 2012 Responsive design 18 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!

18 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?

  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.

Leave A Response