Masonry Layouts with Tailwind CSS
Let me get straight to the point: making a true masonry layout where items line up horizontally requires JavaScript. But using only CSS, we can get a similar look with things stacked vertically.
So, we end up with a kind of fake masonry layout, which is fine if the order of things isn’t super important. Nothing against JavaScript; sometimes it’s just easier to keep things simple and not add extra stuff to your project.
We will follow two different approaches to make the masonry layout with Tailwind CSS:
- One based on the simple use of CSS grids.
- The other uses CSS columns and has a much lighter structure.
Both ways work well, pick whichever you prefer!
Masonry layout with CSS grids
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<!-- Column #1 -->
<div class="grid gap-4">
<div>
<img class="w-full rounded-xl shadow" src="./masonry-01.jpg" width="232" height="290" alt="Image 01" />
</div>
<div>
<img class="w-full rounded-xl shadow" src="./masonry-02.jpg" width="232" height="290" alt="Image 02" />
</div>
<div>
<img class="w-full rounded-xl shadow" src="./masonry-03.jpg" width="232" height="174" alt="Image 03" />
</div>
</div>
<!-- Column #2 -->
<div class="grid gap-4">
<div>
<img class="w-full rounded-xl shadow" src="./masonry-04.jpg" width="232" height="155" alt="Image 04" />
</div>
<div>
<img class="w-full rounded-xl shadow" src="./masonry-05.jpg" width="232" height="349" alt="Image 05" />
</div>
<div>
<img class="w-full rounded-xl shadow" src="./masonry-06.jpg" width="232" height="250" alt="Image 06" />
</div>
</div>
<!-- Column #3 -->
<div class="grid gap-4">
<div>
<img class="w-full rounded-xl shadow" src="./masonry-07.jpg" width="232" height="349" alt="Image 07" />
</div>
<div>
<img class="w-full rounded-xl shadow" src="./masonry-08.jpg" width="232" height="155" alt="Image 08" />
</div>
<div>
<img class="w-full rounded-xl shadow" src="./masonry-09.jpg" width="232" height="250" alt="Image 09" />
</div>
</div>
<!-- Column #4 -->
<div class="grid gap-4">
<div>
<img class="w-full rounded-xl shadow" src="./masonry-10.jpg" width="232" height="290" alt="Image 10" />
</div>
<img class="w-full rounded-xl shadow" src="./masonry-11.jpg" width="232" height="155" alt="Image 11" />
<img class="w-full rounded-xl shadow" src="./masonry-12.jpg" width="232" height="309" alt="Image 12" />
</div>
</div>
Masonry layout with CSS columns
<div class="columns-2 md:columns-4 gap-4 space-y-4">
<img class="w-full rounded-xl shadow" src="./masonry-01.jpg" width="232" height="290" alt="Image 01" />
<img class="w-full rounded-xl shadow" src="./masonry-02.jpg" width="232" height="290" alt="Image 02" />
<img class="w-full rounded-xl shadow" src="./masonry-03.jpg" width="232" height="174" alt="Image 03" />
<img class="w-full rounded-xl shadow" src="./masonry-04.jpg" width="232" height="155" alt="Image 04" />
<img class="w-full rounded-xl shadow" src="./masonry-05.jpg" width="232" height="349" alt="Image 05" />
<img class="w-full rounded-xl shadow" src="./masonry-06.jpg" width="232" height="250" alt="Image 06" />
<img class="w-full rounded-xl shadow" src="./masonry-07.jpg" width="232" height="349" alt="Image 07" />
<img class="w-full rounded-xl shadow" src="./masonry-08.jpg" width="232" height="155" alt="Image 08" />
<img class="w-full rounded-xl shadow" src="./masonry-09.jpg" width="232" height="250" alt="Image 09" />
<img class="w-full rounded-xl shadow" src="./masonry-10.jpg" width="232" height="290" alt="Image 10" />
<img class="w-full rounded-xl shadow" src="./masonry-11.jpg" width="232" height="155" alt="Image 11" />
<img class="w-full rounded-xl shadow" src="./masonry-12.jpg" width="232" height="309" alt="Image 12" />
</div>