Responsive Masonry Layout with TailwindCSS in 2 Steps

kdrbek — Mon, 15 Nov 2021 15:50:06 +0000

Masonry views on a website are visually appealing. Let's quickly create a carousel with you using TailwindCSS. This article assumes you have 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;

.masonry (1 column)
.masonry-sm (2 column)
.masonry-md (3 column)

@tailwind base;
@tailwind components;
@tailwind utilities;

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

    }
}

2. Use them inside className

Now you can use these classes as standard TailwindCSS feature. You should use them inside parent div.

<div className="masonry sm:masonry-sm md:masonry-md">

  <div className="rounded-lg bg-gray-500 p-4 break-inside">
    <p> lorem100 </p>
  </div>
  <div className="rounded-lg bg-gray-500 p-4 break-inside">
    <p> lorem150 </p>
  </div>
  <div className="rounded-lg bg-gray-500 p-4 break-inside">
    <p> lorem50 </p>
  </div>
  <div className="rounded-lg bg-gray-500 p-4 break-inside">
    <p> lorem200 </p>
  </div>

</div>

That is all. You now have a masonry layout that is simple to use and looks good.

DEV Community: kdrbek

Responsive Masonry Layout with TailwindCSS in 2 Steps

1. Configure index.css in your react-app

2. Use them inside className