DEV Community

Cover image for TailwindCSS Masonry Layout
Luca Spezzano
Luca Spezzano

Posted on

TailwindCSS Masonry Layout

Image description

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 👇

Discussion (3)

Collapse
gzamann profile image
Gulshan Zaman Khan

Awesome stuff 👏

Collapse
93lucasp profile image
Luca Spezzano Author

The friend link for everyone ;) medium.com/notonlycss/tailwindcss-...

Collapse
lukeshiru profile image
Luke Shiru

You can actually put it as a canonical URL in the post itself:

Screenshot of DEV post settings with canonical URL highglighted

Cheers!