Masonry
These modular elements can be readily used and customized across pages and in different blocks.
Explore all of Stack's modular elements
at the
Element Index Page →
Masonry Layout
Stack uses the Isotope plugin to achieve the fitted 'masonry' grid effect. A masonry grid requires a parent .masonry element with child .masonry__container element. The masonry items are housed inside the .masonry__container element, each inside its own .masonry__item element.
<div class="masonry"> <div class="masonry__container"> <div class="masonry__item"> CONTENT </div> <div class="masonry__item"> CONTENT </div> <div class="masonry__item"> CONTENT </div> </div> </div>




Masonry Filters
Add the .masonry-filter-holder element with child .masonry__filters element to add filters to the page.
The filters will populate automatically based on the data-masonry-filter attributes on each of the .masonry__item elements.
Adjust the Masonry element in the following ways:
- data-filter-all-text attribute on the .masonry__filters element changes the "Show All" text
- .masonry-filters--horizontal added to the .masonry-filter-holder element displays the filters in a horizontal list instead of the default dropdown.
<div class="masonry-filter-holder"> <div class="masonry__filters" data-filter-all-text="All Categories"></div> </div> <div class="masonry"> <div class="masonry__container"> <div class="masonry__item"> CONTENT </div> <div class="masonry__item"> CONTENT </div> <div class="masonry__item"> CONTENT </div> </div> </div>



