Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 607
Davide Casiraghi Avatar asked Apr 02 '21 03:04

Davide Casiraghi


People also ask

Why you should not use Tailwind CSS?

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.

Can CSS grid do masonry?

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.

What are utility classes in tailwind?

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.

What is the benefit of using Tailwind CSS?

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.

How to create masonry layout using tailwind CSS?

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.

What is a utility class in tailwind CSS?

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>

How to create a carousel with tailwind CSS?

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

Why we need to create our own component class in tailwindcss?

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.


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>
like image 164
Davide Casiraghi Avatar answered Oct 17 '22 23:10

Davide Casiraghi


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 !

like image 32
kissu Avatar answered Oct 17 '22 23:10

kissu