https://github.com/markmead/alpinejs-masonry
Create masonry layouts based on your CSS grid values 🎉
https://github.com/markmead/alpinejs-masonry
alpine-js alpinejs alpinejs-plugin javascript masonry masonry-grid masonry-layout
Last synced: 6 months ago
JSON representation
Create masonry layouts based on your CSS grid values 🎉
- Host: GitHub
- URL: https://github.com/markmead/alpinejs-masonry
- Owner: markmead
- License: mit
- Created: 2022-10-20T09:48:00.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-07T08:12:46.000Z (7 months ago)
- Last Synced: 2025-03-31T12:04:07.850Z (6 months ago)
- Topics: alpine-js, alpinejs, alpinejs-plugin, javascript, masonry, masonry-grid, masonry-layout
- Language: JavaScript
- Homepage: https://js.hyperui.dev/examples/layout-masonry
- Size: 62.5 KB
- Stars: 94
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Alpine JS Masonry
Create masonry layouts based on your CSS grid values 🎉
**Not Using Alpine JS?** -
[Use JS Masonry](https://github.com/markmead/js-masonry)
## Install
### With a CDN
```html
```
### With a Package Manager
```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.
### Options
#### 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
### Grid Items Stretching
This can be fixed by adding `align-items: flex-start` to the element with
`display: grid`.
## Stats
