infinite layouts with batteries included

Grid Demo

gx
rg
xx
wl
yk
xv
pk
lr
tu
cz
ia
zc
ri
im
zp
qi
vy
kg
ym
ar

Kanban Demo

to do

what & why?

Muuri creates responsive, sortable, filterable and draggable layouts. Comparing to what's out there Muuri is a combination of Packery, Masonry, Isotope and Sortable.

You can build pretty amazing layouts without a single line of JavaScript these days. However, sometimes (rarely though) CSS just isn't enough, and that's where Muuri comes along. At it's very core Muuri is a layout engine which is limited only by your imagination. You can seriously build any kind of layout, asynchronously in web workers if you wish.

Custom layouts aside, you might need to sprinkle some animations and/or interactivity (filtering / sorting / drag & drop) on your layout (be it CSS or JS based). Stuff gets complex pretty fast and most of us probably reach for existing libraries to handle the complexity at that point. This is why most of these extra features are built into Muuri's core, so you don't have to go hunting for additional libraries or re-inventing the wheel for the nth time.

The long-term goal of Muuri is to provide a simple (and as low-level as possible) API for building amazing layouts with unmatched performance and most of the complexity abstracted away.

Features

Credits

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 survey "A Thousand Ways to Pack the Bin - A Practical Approach to Two-Dimensional Rectangle Bin Packing" came in handy when building Muuri's layout algorithms. Thanks Jukka!

Big thanks to the people behind Web Animations polyfill for making it possible to use Web Animations API reliably across browsers today.

Haltu Oy was responsible for initiating this project in the first place and funded the intial development. Thanks Haltu!

Created and maintained by Niklas