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.

The duration is optional and defaults to 2500ms, so x-masonry.wait works too.

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.

Polling is capped at a minimum of 100ms. Anything lower is treated as 100ms, as rebuilding the layout any faster than that measures every item on the page hundreds of times a second for no visible benefit.

Combining Modifiers

You can't. Only the first modifier is read, so x-masonry.wait.500.poll.500 waits and never polls. Pick one.

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.

Grid Inside a Hidden Element

If the grid starts inside something hidden with display: none, like a closed tab or accordion panel, the browser doesn't resolve the column widths yet and the layout is built with the wrong number of columns.

Dispatch reload:masonry when the content is revealed to rebuild it correctly.

Stats