Custom grids are some of the toughest features to create from scratch. You can find plenty of masonry grid plugins but they each have their own limitations & requirements.
The Muuri script is a strong alternative for anyone who needs sortable & responsive grid elements with touch support.
On the main project page, you’ll find a beautiful grid demo with all the features. Animation effects, drag & drop support, and different grid elements of varying sizes. This demo showcases just how much control you have with a Muuri grid.
You can choose which elements to display, based on classes (i.e. filtering), along with how you want to fill out empty spaces.
Masonry grids often leave empty spots because the grid elements don’t always fit together perfectly. This is pretty typical for larger websites such as Pinterest. Although, you can add draggable grid items to pretty much any user-controlled interface.
Then, you create a container grid element and target that with a new instance of the
Muuri() method. It’s all pretty simple and especially easy to use by copying the code snippets from the GitHub repo.
With full support for all modern browsers (IE9+) and a touch-enabled interface, this plugin is one of the best for drag & drop grid features.
Learn more by reading through the Muuri homepage and tinkering with the live demos. This is a great system for dynamic grids and it’s still in active development, so you can trust this plugin is gonna be around for the long haul.