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.

Lets 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 | Jun, 2022 | Medium

Luca Spezzano Jun 27, 2022

Medium