When Pinterest became popular, grid-style layouts came to the fore. They quickly became a UX community favorite for displaying photography portfolios, product thumbnails on eCommerce sites, and article snippets on blogs. While they are primarily used to display text and image content, a number of products have used these plugins to create data-driven dashboards. Here are two examples of grid-style or modular layouts, Geckoboard and Freeboard:

geckoboard

freeboard

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

In this post, we’ll help you compare jQuery grid plugins with the use of the Data Visualization Tool that helps you choose which is the best charting javascript library.

How They All Match Up

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 was then added to the list Isotope, and Packery, which have additional features like filtering, and drag and 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.

Which Plugin Should You Choose?

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.

Choose the Best Option for Your Needs

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.

Take your data visualization to a whole new level

From column to donut and radar to gantt, FusionCharts provides with over 100+ interactive charts & 2,000+ data-driven maps to make your dashboards and reports more insightful

Explore FusionCharts

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

8 responses on “Comparing jQuery Grid Plugins: Masonry vs. Isotope vs. Packery vs. Gridster vs. ShapeShift vs. Shuffle.js

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

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

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

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

  5. 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.

  6. 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

  7. There are plenty of plugins based on Isotope, I can recommend one of them, which is the Media Boxes Portfolio https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020