Skip to content

Create masonry layouts based on your CSS grid values πŸŽ‰

License

Notifications You must be signed in to change notification settings

markmead/alpinejs-masonry

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

25 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Alpine JS Masonry

Create masonry layouts based on your CSS grid values πŸŽ‰

Alpine JS Masonry

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.

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.

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