Choose Right jQuery Grid Plugin : A Comparative Analysis

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:

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