Muuri.js — responsive, sortable, filterable, draggable, and animated layout

Muuri is a JavaScript layout engine that allows you to build all kinds of layouts and make them responsive, sortable, filterable, draggable and/or animated. Now it’s v4, and combined tech with Packery, Masonry, Isotope, and Sortable. It’s a very useful tool, fast and easy building functional layouts.

Official website

How to use it briefly:

step1:

import CDN or npm install

npm install muuri

or

<script src="https://cdn.jsdelivr.net/npm/muuri@0.9.5/dist/muuri.min.js"></script>

if the browser doesn’t support Web Animations, install it.

npm install web-animations-js

or

<script src="https://cdn.jsdelivr.net/npm/web-animations-js@2.3.2/web-animations.min.js"></script>

Step2: HTML

<div class="grid">
  <div class="item">
    <div class="item-content">
      <!-- Safe zone, enter your custom markup -->
      This can be anything.
      <!-- Safe zone ends -->
    </div>
  </div>

  <div class="item">
    <div class="item-content">
      <!-- Safe zone, enter your custom markup -->
      <div class="my-custom-content">…