Build Responsive Sortable Grid Layouts With This Script

By Jake Rocheleau. in UI/UX. Updated on April 9, 2018.

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.

It’s built on Velocity.js for the animations, along with the Hammer.js library for handling mobile touch. Muuri does not require jQuery, so it’s one of the few vanilla JavaScript plugins for grid interfaces.

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.

Think about social profiles with widgetized layouts and how they would work. Or, think about custom to-do lists running as progressive web apps on JavaScript. There’s actually a great demo of this on the Muuri page showcasing a sample to-do list and how it could work as a PWA on mobile.

To get started, you just include all the JavaScript dependencies, along with the Muuri scripts. You can pull them down through npm or grab a copy from the GitHub repo.

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.