How to Create Columns with the Same Height in Tailwind CSS ?

Last Updated : 14 Feb, 2024

Creating columns of equal height is a common design requirement in web development. This need arises in scenarios like displaying a grid of cards or a list of items where each column should have the same height regardless of its content. Tailwind CSS, a utility-first CSS framework, provides several ways to achieve equal height columns effortlessly. This article will explore these methods, including Flexbox, Grid, and other Tailwind utilities, with detailed descriptions and complete HTML code examples.

Table of Content

Using Flexbox
Using Grid
Using Tailwind CSS Height Utilities

Using Flexbox

Tailwind CSS's Flexbox utilities make it simple to create columns with equal height. By applying flex display and flex-col direction to a container, and then controlling the width of each child element, you can ensure that all columns match the height of the tallest column.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Equal Height Columns with Flexbox</title>
    <link href=
        "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
        rel="stylesheet">
</head>

<body>
    <div class="flex p-4">
        <div class="flex-1 bg-blue-500 p-4 text-white">
            GeeksforGeeks: A computer science portal for geeks.
        </div>
        <div class="flex-1 bg-green-500 p-4 text-white">HTML</div>
        <div class="flex-1 bg-red-500 p-4 text-white">CSS</div>
    </div>
</body>

</html>

Output

equal-height

Using Grid

The CSS Grid layout offers another approach to creating equal-height columns. Tailwind CSS provides Grid utilities that simplify this process. By setting a container to grid and defining the grid columns, all child elements automatically have equal height.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Equal Height Columns with Grid</title>
    <link href=
        "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
        rel="stylesheet">
</head>

<body>
    <div class="p-4 grid grid-cols-3 gap-2">
        <div class="bg-blue-500 p-4 text-white">
            GeeksforGeeks: A computer science portal for geeks.
        </div>
        <div class="bg-green-500 p-4 text-white">HTML</div>
        <div class="bg-red-500 p-4 text-white">CSS</div>
    </div>
</body>

</html>

Output

equal-height-2

Using Tailwind CSS Height Utilities

While Flexbox and Grid are the most straightforward ways to achieve equal-height columns, there may be scenarios where you need to explicitly set the height of columns. Tailwind's height (h) utilities can be used to manually set the height of each column to the same value.

HTML