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:
(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.
|Drag & drop||✖||✖||✔||✔||✔||✖|
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.