Comparing jQuery Grid Plugins: Masonry vs Isotope vs Packery vs Gridster vs ShapeShift vs Shuffle.js

Grid-style layouts came into the spotlight when Pinterest grew popular. They became a hot favorite in the UX community for displaying photography portfolios, thumbnails of products on ecommerce sites, and article snippets on blogs. While they are primarily used to display text and image content, there’s a fair share of products that have adopted these plugins to build data-driven dashboards. Here are two examples – Geckoboard, and Freeboard – which use the grid-style or modular layout:

geckoboard

freeboard

(Related Read: 5 Dashboard Design Trends to watch out for)

If you’re building a dashboard, and are considering a grid-style layout, there are numerous options available. It would take a lot of searching, browsing, and note taking to research the entire gamut of plugins. However, to save you some time, I’ve created a comparison table of the popular jQuery plugins that do the job, and do it well.

Features Masonry Isotope Packery Gridster ShapeShift Shuffle.js
Browser support IE8+ IE8+ IE8+ IE9+ IE9+ IE7+
jQuery dependency
Responsive
No gaps
Drag & drop
Sorting
Filtering
Multiple layouts
Animations
Licensing MIT Commercial Commercial MIT MIT MIT
StackOverflow Qs 3824 2511 144 312 45 17
Github forks 1283 965 125 688 264 50
Github commits 375 727 324 253 397 132

To summarize the table, Masonry was the plugin that started it all, and has inspired many other plugins out there. After the success of Masonry, its creator @desandro, then added to the list Isotope, and Packery, which have additional features like filtering, and drag & drop. Together, these three plugins rule the roost of grid-style plugins.

However, if you’re willing to explore other options, there’s a long list of plugins both open source, and commercial ones to pick from. I’ve listed three of the better plugins – Gridster, ShapeShift, and Shuffle.js in this comparison. They make excellent alternatives to the top three.

About which plugin to finally choose, if you’re building an enterprise app, you need reliability first and foremost. In that case, Masonry, Isotope, and Packery have the biggest community, and won’t leave you stranded with issues. If you’re more concerned about a particular feature like having both filtering and drag & drop capability, go with one of the other plugins like Gridster, or ShapeShift. But remember, Gridster isn’t responsive.

If you want to leave no stone unturned in your search for the perfect plugin, here’s a list of plugins, both free and commercial, that didn’t make it to the comparison but are worthy of mention – Nested, Mason.js, Cube Portfolio, Megafolio, Gridalicious, Woomark, Smart content placer, and Freetile.

As you can tell, it’s a crazy world out there. There are plugins galore, each with its own take on grid-style layouts. It’s not an easy task to choose one plugin that will fit your project just right. However, I’ve laid out the top ones in this post, and I hope they’ll cut short some time from your search.

Chime in with your comments on which is your favorite plugin, and why.

  • Freddy Cano October 28, 2014, 9:18 am

    This is extremely informative. Could you add where mason.js from Drew Dahlman stands on all this. It claims that there are no gaps.

  • Fred April 9, 2015, 10:31 pm

    One major drawback of Isotope: it is really slow when more than 50 items are used, which could render it useless for galleries etc.

  • Fitz April 15, 2015, 7:11 pm

    Thanks for the list and breakdown. I found Shuffle.js suited my needs perfectly.

  • Brandt August 14, 2015, 8:06 pm

    Could you define what you mean by responsive in the comparison grid?

  • John Fredson November 9, 2015, 2:04 pm

    Nice list!
    My favorite is Gridifier – http://gridifier.io. It also supports multi-touch drags and is well suited for usage with modern SPA frontend frameworks.

  • Yiotis April 1, 2016, 4:42 pm

    Some of you might wish to take a look at Filterizr, a jQuery plugin I have developed for similar functionality.
    Moreover as regards Filterizr:
    -Shuffles, sorts, filter and searches! (with preset controls)
    -Lightweight (only 10kb)
    -Highly customizable (allows you to use custom CSS for your transitions)
    -Optimized for performance (even with a big number of items on mobile)
    -MIT licensed

    To download it, take a look at the docs or a live demo: http://yiotis.net/filterizr

Leave a Comment