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 forces an extra HTML-based abstraction layer for a CSS job. This is always going to be an anti-pattern. On balance, I think it's slightly worse than just using inline CSS – either via Styled Components or "vanilla CSS". At least inline CSS doesn't force me to memorize a bunch of new class names.
Level 3 of the CSS Grid Layout specification includes a masonry value for grid-template-columns and grid-template-rows . This guide details what masonry layout is, and how to use it. Warning: This feature is only implemented in Firefox, and can be enabled by setting the flag layout.
Tailwind's flexbox and padding utilities ( flex , shrink-0 , and p-6 ) to control the overall card layout. The max-width and margin utilities ( max-w-sm and mx-auto ) to constrain the card width and center it horizontally.
Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes directly into the HTML code. Custom styling can be provided to the components with the help of this framework.
We create masonry layout class for 3 different screen; 2. Use them inside className Now you can use these classes as standard TailwindCSS feature. You should use them inside parent div. That is all. You now have a masonry layout that is simple to use and looks good.
Utility classes mean "one class, one style." In TailwindCSS we are given as many utility classes as possible so we can combine them and make the desired design we need in our Front-end design. Example. <div class="p-4 text-orange-200 bg-indigo-200"> Hello there </div>
Let's quickly create a carousel with you using TailwindCSS. This article assumes basic knowledge of Tailwind. 1. Configure index.css in your react-app First of all, let's add @layer to your index.css file in src folder. We create masonry layout class for 3 different screen; 2. Use them inside className
There may be many situations where, you will need to create your own component class in TailwindCSS for many reasons best known to you, remember component classes is one class, many styles. Here is some reason why we may need to create our own customized component in TailwindCSS: Too many classes for one HTML element.
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>
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 !
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With