/ best free open source web resources /

Graphic Resources

jQuery Masonry – A Layout Plugin for jQuery

Posted · Category: Framework, License Free

jQuery Masonry is a layout plugin for jQuery. Think of Masonry as the flip side of CSS floats. Where as floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. The result leaves no vertical gaps between elements of varying height, just like a mason fitting stones in a wall. Masonry will work with all structural elements: div’s, lists, p’s, spans.

There are no setting or options within in the plugin. Instead, all spacing properties can be set with CSS. The only property required for Masonry to work is for the width of the child elements. Child elements should be should have equal width in order to avoid any overlapping.

jQuery Layout

Requirements: jQuery Framework
Demo: http://desandro.com/resources/jquery-masonry
License: License Free

  • But what is the advantage over columns in css?

  • Nate

    Cool I guess but like Edwin said, I don’t really see the point

  • VonShakalon

    But, but… masons are Satan worshippers and baby eaters, aren’t they? :OOOOOOOOOOOOOOOO

  • The advantage of this script is that it’s dynamic. So you can arrange post excerpts on a page vertically withouting having to use complex php to float lefts and rights – which gets even harder when you try and arrange over 3 columns!

  • baste

    Have you ever noticed site like amazon.com (arrange) displays content based on screen size ?
    This one does exactly the same, it’s dynamic.

  • Pingback: Jquery animation | Mydons {Blog Growing Faster}()

Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons