Can I Create Masonry Layout using Tailwind CSS Utility Classes ?

Last Updated : 26 Apr, 2023

Yes, you can create a Masonry layout using Tailwind CSS utility classes. A Masonry layout is a popular design pattern used for displaying images or other elements in a grid-like structure where each item is of varying height and width. This layout creates a visually appealing and dynamic design that helps to break the monotony of a traditional grid layout.

Tailwind CSS is a highly customizable CSS framework that offers a wide range of utility classes to help you quickly build responsive and user-friendly websites. Tailwind CSS can be used to create a Masonry layout by leveraging its utility classes for grid layout and flexbox.

Syntax: To create a Masonry layout using Tailwind CSS, you need to use the grid and flexbox utility classes. The grid classes are used to create a grid container and define the size and position of the grid items. The flexbox classes are used to align and distribute the items within the grid container.

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
    <div class="flex flex-col bg-white shadow-md overflow-hidden">
        ...
    </div>
     ....
</div>

Approaches: There are several approaches you can take to create a Masonry layout using Tailwind CSS. Here are two popular approaches:

Approach 1: Using Grid: In this approach, you can use the grid-auto-rows property to ensure that the height of each row adjusts to the height of its content.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
        rel="stylesheet"> 
</head> 
  
<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold"> 
        GeeksforGeeks 
    </h1> 
  
    <b>CREATING A MASONRY LAYOUT</b> 
      
    <div class="grid grid-cols-1 md:grid-cols-2  
        lg:grid-cols-3 gap-4"> 
  
        <div class="flex flex-col bg-white  
            shadow-md overflow-hidden"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png"
                class="w-full h-auto"> 
            <h2 class="text-lg font-bold py-2 px-4"> 
                Image 1 
            </h2> 
        </div> 
          
        <div class="flex flex-col bg-white  
            shadow-md overflow-hidden"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png"
                class="w-full h-auto"> 
            <h2 class="text-lg font-bold py-2 px-4"> 
                Image 2 
            </h2> 
        </div> 
          
        <div class="flex flex-col bg-white  
            shadow-md overflow-hidden"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png"
                class="w-full h-auto"> 
            <h2 class="text-lg font-bold py-2 px-4"> 
                Image 3 
            </h2> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Approach 2: Using Flexbox and flex-wrap: In this approach, you can use the Flexbox utility classes to create a flex container and wrap the items into multiple rows. You can use the flex-wrap property to control the wrapping behavior of the items.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
        rel="stylesheet"> 
</head> 
  
<body> 
    <h1 class="text-green-600 text-5xl font-bold"> 
        GeeksforGeeks 
    </h1> 
  
    <b>CREATING A MASONRY LAYOUT</b> 
  
    <div class="grid grid-cols-1 sm:grid-cols-2  
        md:grid-cols-3 gap-4"> 
        <div class="flex flex-col bg-white  
            shadow-md overflow-hidden"> 
            In today’s digital world, when there are  
            thousands of online platforms (maybe more  
            than that!) available over the web, it  
            becomes quite difficult for students to  
            opt for a quality, relevant and reliable  
            platform for themselves. Meanwhile, as  
            Computer Science is a very vast field 
            hence students are required to find an 
            appropriate platform that can fulfill all  
            their needs such as – Tutorials & Courses,  
            Placement Preparation, Interview Experiences,  
            and various others. And with the same concern, 
            GeeksforGeeks comes in the picture – a 
            one-stop destination for all Computer  
            Science students!! 
        </div> 
        In today’s digital world, when there are  
        thousands of online platforms (maybe more  
        than that!) available over the web, it  
        becomes quite difficult for students to  
        opt for a quality, relevant and reliable  
        platform for themselves. Meanwhile, as  
        Computer Science is a very vast field 
        hence students are required to find an 
        appropriate platform that can fulfill all  
        their needs such as – Tutorials & Courses,  
        Placement Preparation, Interview Experiences,  
        and various others. And with the same concern, 
        GeeksforGeeks comes in the picture – a 
        one-stop destination for all Computer  
        Science students!! 
    </div> 
</body> 
  
</html>