Create masonry layouts based on your CSS grid values 🎉

Using Alpine JS? - Use Alpine JS Masonry

<script
  defer
  src="https://unpkg.com/data-masonry@latest/dist/masonry.min.js"
></script>

yarn add -D data-masonry

npm install -D data-masonry

import masonry from 'data-masonry'

document.addEventListener('DOMContentLoaded', masonry())

<ul class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4" data-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 data-masonry will do all the work for you and will even handle when the user resizes the window.

If needed, you can pass the waitDuration option with a duration in milliseconds like this.

<ul
  class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4"
  data-masonry="{ waitDuration: 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 pollDuration option.

If needed, you can pass the pollDuration option with a duration in milliseconds like this.

<ul
  class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4"
  data-masonry="{ pollDuration: 2500 }"
>
  ...
</ul>

This will trigger the masonry grid to reload every 2500ms, this is helpful when content is being added dynamically.

You can also trigger the reload:masonry on the window to trigger the masonry grid to reload.

const reloadMasonry = new Event('reload:masonry', {
  bubbles: true,
})

dispatchEvent(reloadMasonry)

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