Muuri
A JavaScript library for building responsive grid layouts that can be sorted, filtered, and dragged.
- Stars
- 10.9k
- Forks
- 645
- Licence
- MIT
- Language
- JavaScript
- Last update
- 2.5 years ago
- Type
- Library
No commits in over a year — check for forks or alternatives before adopting.
What it is
Muuri is a JavaScript layout engine that arranges items in custom grid layouts that resize with the screen. It also adds animation, filtering, sorting, and drag and drop on top of the layout, so developers do not need to combine several separate libraries. The README describes it as a mix of Packery, Masonry, Isotope, and Sortable.
- Create a responsive grid of items that users can reorder by dragging
- Filter a grid of items by category with animated show and hide
- Drag items from one grid into another
- Compute a custom layout in web workers so the page stays responsive
Great for
- Front-end developers building card or photo grids that need drag and drop or filtering
- Developers who want custom layouts beyond what CSS alone can do
- Projects that want layout, animation, and interaction in a single library
Not ideal for
- Simple layouts that CSS grid or flexbox can handle, since the README says CSS is often enough and Muuri adds complexity
- People without JavaScript experience, because setup requires writing code and CSS rules
How to get it
- 1
Install with a package manager
Install via npm
npm install muuri - 2
Run it
- Add a grid container element and item elements with an inner content element, as shown in the README markup example
- Apply the README CSS: position relative on the grid, absolute on items
- Create the grid with: var grid = new Muuri('.grid');
- Open the page in a browser and try the layout
- 3
Get the most out of it
- Use the sortData option to control item ordering
- Enable drag with dragEnabled and tune dragStartPredicate and dragSort
- Use the layout options such as fillGaps, horizontal, and alignRight to change arrangement
- Listen for grid events and use item methods from the API section
Downloads
Strengths
- Bundles layout, animation, sorting, filtering, and drag and drop in one library
- Supports asynchronous layout calculation in web workers and nested grids
- Installable via npm or a CDN link, with a minimal starting configuration
Trade-offs
- Requires specific CSS rules, such as absolute positioning on items and no overflow auto or scroll on the grid element
- Browsers without Web Animations support need an extra polyfill
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| muuri (this) | 10.9k | Library | intermediate | 2.5 years ago | Front-end developers building card or photo grids that need drag and drop or filtering |
| Masonry | 18.1k | Library | intermediate | 3.6 years ago | iOS or macOS developers writing Objective-C projects that use Auto Layout in code |
| Sortable | 31.2k | Library | beginner | 8 months ago | Web developers adding reorderable lists to a site or app |
| react-grid-layout | 22.5k | Library | intermediate | 4 days ago | React developers building dashboards with movable panels |
| draggable | 18.5k | Library | intermediate | 11 months ago | Front-end developers who want full control over how drag and drop feels and behaves |
| dnd-kit | 17.8k | Library | intermediate | 5 days ago | Developers building sortable lists or grids in a React, Vue, Svelte, or Solid app |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.