Create masonry layouts based on your CSS grid values 🎉
npm install alpinejs-masonryCreate masonry layouts based on your CSS grid values 🎉
Not Using Alpine JS? -
Use JS Masonry
``html
defer
src="https://unpkg.com/alpinejs-masonry@latest/dist/masonry.min.js"
>
`
`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()
`
`html`
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.
#### 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.
This can be fixed by adding align-items: flex-start to the element withdisplay: grid`.



