TailwindCSS Masonry Layout

The Masonry layouts once were used exclusively for image galleries.

But this kind layout is very catchy for the users, so the use cases have increased nowadays, it is used for post list, showcase list etc etc.

Let’s do it using some random images found on Unsplash

<div class="columns-2 md:columns-3 lg:columns-4">
<img class="mb-4" src="https://source.unsplash.com/random/1" />
<img class="mb-4" src="https://source.unsplash.com/random/2" />
<img class="mb-4" src="https://source.unsplash.com/random/3" />
<img class="mb-4" src="https://source.unsplash.com/random/4" />
<img class="mb-4" src="https://source.unsplash.com/random/5" />
<img class="mb-4" src="https://source.unsplash.com/random/6" />
<img class="mb-4" src="https://source.unsplash.com/random/7" />
....
</div>

Just 4 classes to create this layout, amazing right?

ou can find on Codepen here the basic layout and here the blog post layout.

If you like, you can check out the full article on Medium 👇

TailwindCSS Masonry Layout. How to Develop a Masonry Layout Only… | by Luca Spezzano | NotOnlyCSS | Medium

Luca Spezzano ・ Jun 27, 2022 ・

Medium