Alpine JS Masonry

Create masonry layouts based on your CSS grid values 🎉

!Alpine JS Masonry

Not Using Alpine JS? -
Use JS Masonry

Install

$3

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


`

$3

`shell
yarn add -D alpinejs-masonry

npm install -D alpinejs-masonry
`

`js
import Alpine from 'alpinejs'
import masonry from 'alpinejs-masonry'

Alpine.plugin(masonry)

Alpine.start()
`

Example

`html


• Item 1


• Item 2


• Item 3


• Item 4


• Item 5


• Item 6


`

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.

$3

#### Delay Building Masonry Grid

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

`html



...



`

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.

`html



...



`

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

$3

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

Stats