DEV Community

Cover image for TailwindCSS Masonry Layout
Luca Spezzano
Luca Spezzano

Posted on • Edited on • Originally published at Medium

19 2 1

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 👇

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (2)

Collapse
 
gzamann profile image
Gulshan

Awesome stuff 👏

Collapse
 
93lucasp profile image
Luca Spezzano

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

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video