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 .masonryelement with child .masonry__containerelement. The masonry items are housed inside the .masonry__containerelement, each inside its own .masonry__itemelement. 

<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-holderelement with child .masonry__filterselement to add filters to the page.

The filters will populate automatically based on the data-masonry-filterattributes on each of the .masonry__itemelements.

Adjust the Masonry element in the following ways:

  • data-filter-all-textattribute on the .masonry__filters element changes the "Show All" text
  • .masonry-filters--horizontaladded 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 &nearr;