← Back to Documentation

Documentation

Component: Masonry grid Pinterest-like layout + filtering via Isotope

Masonry grid is a layout where items “pack” into columns and fill vertical gaps — like Pinterest. In this template the masonry logic is built on top of Isotope, so you can also add filtering, sorting, and more.

Download Animmaster Vite Template Save your time — start now

What is masonry?

Masonry is a specific way of placing elements so they fill all available space inside structural columns. Instead of strict rows, items stack vertically and “flow” into gaps.

Why Isotope?
Isotope gives you a stable masonry algorithm plus extras like filtering and sorting — perfect for galleries, portfolios, product grids, and “Pinterest” walls.

Component location

Files are located in src/components/layout/masonry. Inside you’ll find:

  • JS file with base settings and filtering logic.
  • HTML example snippet.
  • SCSS file for styling the grid and filter UI.

Basic usage

To enable the component, add data-anim-masonry to the masonry container, and data-anim-masonry-item to each item. JS will connect automatically.

Masonry — minimal markup
<div data-anim-masonry class="masonry">
	<div data-anim-masonry-item class="masonry__item">A</div>
	<div data-anim-masonry-item class="masonry__item">B</div>
	<div data-anim-masonry-item class="masonry__item">C</div>
</div>

Masonry with filtering

If you need filtering, create a filter list and add data-anim-masonry-filter-link to each link. For items, add data-anim-masonry-filter with the filter key.

Masonry — filtering example
<div class="masonry">

	<ul class="masonry__filter filter-masonry">
		<li class="filter-masonry__item">
			<a href="#" data-anim-masonry-filter-link="*" class="filter-masonry__link">All</a>
		</li>
		<li class="filter-masonry__item">
			<a href="#" data-anim-masonry-filter-link="a" class="filter-masonry__link">Filter A</a>
		</li>
		<li class="filter-masonry__item">
			<a href="#" data-anim-masonry-filter-link="b" class="filter-masonry__link">Filter B</a>
		</li>
		<li class="filter-masonry__item">
			<a href="#" data-anim-masonry-filter-link="c" class="filter-masonry__link">Filter C</a>
		</li>
	</ul>

	<div data-anim-masonry class="masonry__items">
		<div data-anim-masonry-item data-anim-masonry-filter="a" class="masonry__item">A</div>
		<div data-anim-masonry-item data-anim-masonry-filter="b" class="masonry__item">B</div>
		<div data-anim-masonry-item data-anim-masonry-filter="c" class="masonry__item">C</div>
	</div>

</div>
Tip
You can extend the same idea for sorting (date, size, name) — Isotope supports it. Check Isotope docs for advanced options.

Download

Build masonry layouts with filtering and a clean component structure. Download the template and start shipping faster.

Download Animmaster Vite Template Save your time — start now