An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
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
Original Link: https://dev.to/93lucasp/tailwindcss-masonry-layout-4kal
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To