https://github.com/markmead/js-masonry
Create masonry layouts based on your CSS grid values 🎉
https://github.com/markmead/js-masonry
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/js-masonry
- Owner: markmead
- License: mit
- Created: 2022-10-28T23:02:28.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-07T08:14:37.000Z (7 months ago)
- Last Synced: 2025-03-24T20:12:35.907Z (6 months ago)
- Topics: javascript, masonry, masonry-grid, masonry-layout
- Language: JavaScript
- Homepage:
- Size: 43.9 KB
- Stars: 25
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JS Masonry
Create masonry layouts based on your CSS grid values 🎉
**Using Alpine JS?** -
[Use Alpine JS Masonry](https://github.com/markmead/alpinejs-masonry)
## Install
### With a CDN
```html
```
### With a Package Manager
```shell
yarn add -D data-masonry
npm install -D data-masonry
```
```js
import masonry from 'data-masonry'
document.addEventListener('DOMContentLoaded', masonry())
```
## 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 `data-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 `waitDuration` option 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 `pollDuration` option.
#### Rebuilding Masonry Grid Automatically
If needed, you can pass the `pollDuration` option 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.
```js
const reloadMasonry = new Event('reload:masonry', {
bubbles: true,
})
dispatchEvent(reloadMasonry)
```
## Issues
### Grid Items Stretching
This can be fixed by adding `align-items: flex-start` to the element with
`display: grid`.
## Stats
