Stack | Multipurpose HTML Template with Variant Page Builder
Sign up with Email

Already have an account? Login


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>
pic
pic
pic
pic

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>
pic
pic
pic
pic

Looking for styled masonry sections?

View Gallery Sections

or try the live builder ↗