Masonry
Documentation and examples for creating, filtering and sorting magical layouts with the power of Isotope.
Official DocumentationUsage
JS
In order to use this plugin on your page you will need to include the following script in the “Page JS” area from the page’s footer:
<script src="../../assets/libs/isotope-layout/dist/isotope.pkgd.min.js"></script>
Initialization
Now, we need to add basic Masonry layout to our app. You can use the grid’s .col-*
classes for setting the column’s width.
<div class="masonry-container">
<div class="row masonry">
<div class="masonry-item col-lg-4">
<div>
<svg class="bd-placeholder-img card-img-top" width="800" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 800x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">800x600</text></svg>
</div>
</div>
<div class="masonry-item col-lg-4">
<div>
<svg class="bd-placeholder-img card-img-top" width="600" height="800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x800"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x800</text></svg>
</div>
</div>
<div class="masonry-item col-lg-4">
<div>
<svg class="bd-placeholder-img card-img-top" width="600" height="800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x800"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x800</text></svg>
</div>
</div>
<div class="masonry-item col-lg-4">
<div>
<svg class="bd-placeholder-img card-img-top" width="600" height="800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x800"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x800</text></svg>
</div>
</div>
<div class="masonry-item col-lg-4">
<div>
<svg class="bd-placeholder-img card-img-top" width="800" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 800x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">800x600</text></svg>
</div>
</div>
<div class="masonry-item col-lg-4">
<div>
<svg class="bd-placeholder-img card-img-top" width="800" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 800x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">800x600</text></svg>
</div>
</div>
</div>
</div>
Examples
Two cols
<div class="masonry-container">
<div class="row masonry">
<div class="masonry-item col-lg-6">
<div>
<svg class="bd-placeholder-img card-img-top" width="800" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 800x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">800x600</text></svg>
</div>
</div>
<div class="masonry-item col-lg-6">
<div>
<svg class="bd-placeholder-img card-img-top" width="600" height="800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x800"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x800</text></svg>
</div>
</div>
<div class="masonry-item col-lg-6">
<div>
<svg class="bd-placeholder-img card-img-top" width="600" height="800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x800"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x800</text></svg>
</div>
</div>
<div class="masonry-item col-lg-6">
<div>
<svg class="bd-placeholder-img card-img-top" width="800" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 800x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">800x600</text></svg>
</div>
</div>
</div>
</div>
Sorting
You can easily sort through the masonry items by adding filter names on top of a item as bellow, where branding is name of the filter:
<div class="masonry-container">
<ul class="nav nav-pills masonry-filter-menu">
<li class="nav-item">
<a href="#" class="nav-link active" data-filter="*">Show all</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" data-filter="branding">Branding</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" data-filter="identity">Identity</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" data-filter="design">Design</a>
</li>
</ul>
<div class="row masonry mt-4">
<div class="masonry-item col-lg-4 branding">
<div>
<svg class="bd-placeholder-img card-img-top" width="800" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 800x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">800x600</text></svg>
</div>
</div>
<div class="masonry-item col-lg-4 identity">
<div>
<svg class="bd-placeholder-img card-img-top" width="600" height="800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x800"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x800</text></svg>
</div>
</div>
<div class="masonry-item col-lg-4 design branding">
<div>
<svg class="bd-placeholder-img card-img-top" width="600" height="800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x800"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x800</text></svg>
</div>
</div>
<div class="masonry-item col-lg-4 identity">
<div>
<svg class="bd-placeholder-img card-img-top" width="600" height="800" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 600x800"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">600x800</text></svg>
</div>
</div>
<div class="masonry-item col-lg-4 branding">
<div>
<svg class="bd-placeholder-img card-img-top" width="800" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 800x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">800x600</text></svg>
</div>
</div>
<div class="masonry-item col-lg-4 design identity">
<div>
<svg class="bd-placeholder-img card-img-top" width="800" height="600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 800x600"><title>Placeholder</title><rect fill="" width="100%" height="100%"/><text fill="" dy=".3em" x="50%" y="50%">800x600</text></svg>
</div>
</div>
</div>
</div>