How to make use of it:

1. Install & download the Isolde library with NPM.

# NPM
$ npm i isolde --save

2. Import the Isolde.

import isolde from 'isolde';
import 'isolde/dist/isolde.min.css';

// OR
<link rel="stylesheet" href="./isolde.css">
<script type="module">
  import isolde from './isolde.js';
  const isoldejs = new isolde();
</script>

2. Categorize your grid objects utilizing the ‘data-isolde-el’ attribute:

<div id="isolde" class="isolde-default">
  <div data-isolde-el="javascript">
    Item 1
  </div>
  <div data-isolde-el="css">
    Item 2
  </div>
  <div data-isolde-ell="html">
    Item 3
  </div>
  <div data-isolde-el="css">
    Item 4
  </div>
  <div data-isolde-el="javascript">
    Item 5
  </div>
  ...
</div>

3. Create links to filter by way of the grid items.

<ul>
  <li>
    <a data-isolde-link="javascript">JavaScript</a>
  </li>
  <li>
    <a data-isolde-link="css">CSS</a>
  </li>
  <li>
    <a data-isolde-link="html">HTML</a>
  </li>
</ul>

4. Initialize the library and carried out.

const isoldejs = new isolde();

5. Possible choices to customize the masonry grid.

const isoldejs = new isolde({

      // parent element
       parent:  document.querySelector('#isolde'),

      // filter links
      links: document.querySelectorAll('[data-isolde-link]'),

      // active class
      active: 'is-active',

      // in pixels
      margin: 20,

      // for responsive
      responsive: {
        980: {
          columns: 3
        },
        480: {
          columns: 2
        },
        0: {
          columns: 1
        }
      },

      // fade in/out duration
      fadeDuration:{
        in: 300,
        out: 0
      }
  
});

Filterable Masonry Grid, Isolde Plugin/Github

See Demo And Download