Muuri – Responsive, sortable, filterable and draggable grid layouts

If you are a web designer or developer, probably you are familiar with various plugins for responsive and filterable grid layouts.

Such plugins are immensely  useful when it comes to organizing visual content e.g. galleries, blog posts or products. Currently, there are many other plugins doing the same job such as Packery, Masonry, Isotope and jQuery sortable.

Muuri promises to be as useful as the above mentioned solutions while keeping it as tiny as possible. Its layout system allows grid items to be positioned within the container in any way possible.

The author of the plugin outlines:

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.

Muuri uses two additions to be as it is: Velocity (the animation engine) and Hammer.js for providing the dragging features. Hammer is optional and you should include it only if dragging is required. Velocity is a hard dependency if you want Muuri to function properly.

Here is how to use it:

Include the dependencies and Mauri:

<script src="velocity.js"></script>
<script src="hammer.js"></script>
<!-- Needs to be within in body element or have access to body element -->
<script src="muuri.js"></script>

Define grid markup

• Bear in mind that every grid must have a container and item elements within the container element.
• Also, a grid item must always consist of at least two elements. The outer element is used for positioning the item and inner is used for animating its visibility. Any markup is allowed inside the inner item element.

<div class="grid">
<div class="item">
<div class="item-content">

This can be anything.
</div>
</div>
<div class="item">
<div class="item-content">
<div class="my-custom-content">
Yippee!
</div>
</div>
</div>
</div

Styling everything

• The grid element should have a CSS position that is set to relative, absolute or fixed. Muuri automatically resizes the container element depending on the area the item covers.
• The item elements must have a CSS position set to absolute and their display property set to block (unless of course the elements have their display set to block inherently).
• Important is to not put any CSS transitions or animations applied to item elements as they might conflict with the animations provided by Velocity.
• The gap between the tiles can be changed by giving margin to the item elements.

.grid {
position: relative;
}
.item {
display: block;
position: absolute;
width: 100px;
height: 100px;
margin: 5px;
z-index: 1;
}
.item.muuri-dragging,
.item.muuri-releasing {
z-index: 2;
}
.item.muuri-hidden {
z-index: 0;
}
.item-content {
position: relative;
width: 100%;
height: 100%;
}

Initiate Muuri

This is the minimum configuration. Muuri must always have the container element and the initial item elements.

var grid = new Muuri({
container: document.getElementsByClassName('grid')[0],
items: document.getElementsByClassName('item')
});

Check out the all the available options, methods and events.

DEMO DOWNLOAD