Back to Tutorials & Guides

Masonry Layouts with Tailwind CSS

Example of a masonry layout made of pictures

Live Demo Download

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>