Resources

jQuery Masonry

Last updated on 13 August 2012

Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. 

The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall. This project lives on GitHub at github.com/desandro/masonry. There you can grab the latest code and follow development.

  • Resource Name

    jQuery Masonry

  • Resource Creator

    David Desandro

Description

Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

View on Github Download Resource

Related Resources

  • FitVids.js

    fitvids.js

    July 19th, 2012

    A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

  • Image placeholder

    slimScroll

    July 30th, 2012

    slimScroll is a small (2.8KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar - similar to the one Facebook and Google started using.

  • enquire.js

    Enquire.js

    September 13th, 2012

    Enquire.js is a lightweight, pure JavaScript library for handling media queries. It is less than 1kb when GZIP'd and minified, and has absolutely no dependencies. Yup, you read that right - no dependencies, not even jQuery! The most you will have to do is provide a matchMedia polyfill if you wish to support browsers without a native implementation.

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.