Can I create a Masonry layout using Tailwind CSS utility classes?

user_10075394 0
Viewed 12782

I'm trying to create a Masonry layout using Tailwind CSS utility classes (not plain CSS), but going through all the official Tailwind documentation it seems there is not a way to do it already provided by the framework.

Bootstrap 5 allows you to do it but requires JavaScript libraries. https://getbootstrap.com/docs/5.0/examples/masonry/

Is there a way to do it with Tailwind CSS without using any extra JavaScript library?

tailwind-css css html
2 Answers

I solved it like this using TailwindCSS @layer and @variants directives.
The following code provides a 3 column grid layout on LG breakpoint that turns to 2 columns on MD breakpoint and just 1 column on mobile.

Add this your SCSS file:

@layer utilities {
    @variants responsive {
        .masonry-3-col {
            column-count: 3;
            column-gap: 1em;
        }
        .masonry-2-col {
            column-count: 2;
            column-gap: 1em;
        }
        .break-inside {
            break-inside: avoid;
        }
    }
}

And the HTML:

<div class="md:masonry-2-col lg:masonry-3-col box-border mx-auto before:box-inherit after:box-inherit">
  <div class="break-inside p-8 my-6 bg-gray-100 rounded-lg">
    <p>Really long content</p>
  </div>
  <div class="break-inside p-8 my-6 bg-gray-100 rounded-lg">
    <p>Really long content</p>
  </div>
  <div class="break-inside p-8 my-6 bg-gray-100 rounded-lg">
    <p>Really long content</p>
  </div>
  <div class="break-inside p-8 my-6 bg-gray-100 rounded-lg">
    <p>Really long content</p>
  </div>
  <div class="break-inside p-8 my-6 bg-gray-100 rounded-lg">
    <p>Really long content</p>
  </div>
</div>

My solution is an evolution of the answer that I have found in this nice article that was not providing the switch 1-2-3 columns on page resize.
https://blog.marclucraft.co.uk/masonry-layout-with-tailwindcss

Update With Tailwind v3

<div class="relative flex min-h-screen flex-col justify-center py-6 sm:py-12">
  <div
    class="columns-2 2xl:columns-3 gap-10 [column-fill:_balance] box-border mx-auto before:box-inherit after:box-inherit">
    <div class="break-inside-avoid p-8 mb-6 bg-gray-100 rounded-lg">
        <p>Really long content</p>
    </div>
    <div class="break-inside-avoid p-8 mb-6 bg-gray-100 rounded-lg">
        <p>Really long content</p>
        <p>Really long content</p>
        <p>Really long content</p>
        <p>Really long content</p>
    </div>
    <div class="break-inside-avoid p-8 mb-6 bg-gray-100 rounded-lg">
        <p>Really long content</p>
        <p>Really long content</p>
    </div>
    <div class="break-inside-avoid p-8 mb-6 bg-gray-100 rounded-lg">
        <p>Really long content</p>
        <p>Really long content</p>
        <p>Really long content</p>
        <p>Really long content</p>
        <p>Really long content</p>
    </div>
    <div class="break-inside-avoid p-8 mb-6 bg-gray-100 rounded-lg">
        <p>Really long content</p>
        <p>Really long content</p>
        <p>Really long content</p>
    </div>
</div>
</div>

user_100753940

It looks like that only this is required nowadays to do a proper masonry layout without the need to add any libraries:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

So, you could probably extend Tailwind's capabilities with few grid values.

More details on this article: https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/

Current status of this can be found here: https://drafts.csswg.org/css-grid-3/

Wes Bos also do have a free CSS grid course on which, he emulates that kind of behavior with only CSS grid (no masonry prop).

EDIT: Masonry is not easy because it depends on what you're looking for exactly but even columns can be useful in some cases !

user_88165850
Related