Alpine JS Masonry

Create masonry layouts based on your CSS grid values 🎉

Not Using Alpine JS? - Use JS Masonry

Install

With a CDN

<script
  defer
  src="https://unpkg.com/alpinejs-masonry@latest/dist/masonry.min.js"
></script>

<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

With a Package Manager

yarn add -D alpinejs-masonry

npm install -D alpinejs-masonry

import Alpine from 'alpinejs'
import masonry from 'alpinejs-masonry'

Alpine.plugin(masonry)

Alpine.start()

Example

<ul class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4" x-data x-masonry>
  <li class="bg-slate-800 text-white p-4 rounded h-64">Item 1</li>
  <li class="bg-slate-800 text-white p-4 rounded h-32">Item 2</li>
  <li class="bg-slate-800 text-white p-4 rounded h-16">Item 3</li>
  <li class="bg-slate-800 text-white p-4 rounded h-72">Item 4</li>
  <li class="bg-slate-800 text-white p-4 rounded h-48">Item 5</li>
  <li class="bg-slate-800 text-white p-4 rounded h-32">Item 6</li>
</ul>

And that's it.

Fixed heights and Tailwind CSS are not necessary 🙅‍♀️

Under the hood x-masonry will do all the work for you and will even handle when the user resizes the window.

Options

Delay Building Masonry Grid

If needed, you can pass the wait modifier with a duration in milliseconds like this.

<ul class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4" x-data x-masonry.wait.2500>
  ...
</ul>

This will trigger the masonry grid to build after 2500ms, this is helpful when you have slow content that takes a while to load. However, I'd recommend using the poll modifier.

Rebuilding Masonry Grid Automatically

If needed, you can pass the poll modifier with a duration in milliseconds like this.

<ul class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4" x-data x-masonry.poll.2500>
  ...
</ul>

This will trigger the masonry grid to reload every 2500ms, this is helpful when content is being added dynamically.

Rebuilding Masonry Grid with an Event

You can also trigger the reload:masonry on the window to trigger the masonry grid to reload.

This can be done easily with $dispatch('reload:masonry') in Alpine JS.

Issues

Grid Items Stretching

This can be fixed by adding align-items: flex-start to the element with display: grid.

Stats