Masonry

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>