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 👇
Medium
Top comments (3)
Awesome stuff 👏
The friend link for everyone ;) medium.com/notonlycss/tailwindcss-...
You can actually put it as a canonical URL in the post itself:
Cheers!