Masonry

Documentation and examples for creating, filtering and sorting magical layouts with the power of Isotope.

Official Documentation

Usage

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.

Placeholder 800x600
Placeholder 600x800
Placeholder 600x800
Placeholder 600x800
Placeholder 800x600
Placeholder 800x600
<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

Placeholder 800x600
Placeholder 600x800
Placeholder 600x800
Placeholder 800x600
<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:

Placeholder 800x600
Placeholder 600x800
Placeholder 600x800
Placeholder 600x800
Placeholder 800x600
Placeholder 800x600
<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>