Muuri's layout system allows positioning the grid items within the container in pretty much any way imaginable. The default "First Fit" bin packing layout algorithm generates similar layouts as Packery and Masonry. The implementation is heavily based on the "maxrects" approach as described by Jukka Jylänki in his research A Thousand Ways to Pack the Bin. However, you can also provide your own layout algorithm to position the items in any way you want.
Built-in support for dragging and dropping the grid items powered by Hammer.js. The drag and drop stuff is completely optional and Hammer.js is not required as a dependency if you are not using the drag and drop feature.
Extensive API with enough methods and events to gain full control over the library's behaviour.
Fast positioning, show and hide animations powered by Web Animations.
Works in all modern browsers and IE9+ (needs polyfills for web animations and request animation frame).
Muuri is MIT licensed.
Muuri creates responsive, sortable, filterable and draggable grid layouts. Yep, that's a lot of features in one library, but we tried to make it as tiny as possible. Comparing to what's out there Muuri is a combination of Packery, Masonry, Isotope and Sortable.
Muuri is Finnish meaning a wall.
Muuri is currently under active development and might be still a bit rough on the edges so production use is not recommended just yet. But when did that ever stop you ;)
This project owes much to David DeSandro's Masonry, Packery and Isotope libraries. You should go ahead and check them out right now if you haven't yet. Thanks Dave!
Jukka Jylänki's research A Thousand Ways to Pack the Bin came in handy when building Muuri's layout algorithms. Thanks Jukka!
Big thanks to the people behind Web Animations polyfill and Hammer.js for providing such awesome libraries. Muuri would be much less cool without animations and dragging.
Haltu Oy was responsible for initiating this project in the first place and funded the intial development. Thanks Haltu!