How to set auto height on grid item using Tailwind ?

Last Updated : 25 Jan, 2023

Our task is to create a grid container with the height of the grid items set to “auto”. Tailwind CSS includes the grid and grid-cols-number classes, which allow us to easily create a grid.

Approach:

We will use the CDN link of Tailwind CSS and create a basic HTML page, We will create a container box sub-boxes inside the container.
We will use the Tailwind CSS properties to style the elements and we will use the grid-cols-* class of Tailwind CSS with the container. Now the container will act like a grid box where the number of columns will depend on the grid-col-* class of Tailwind CSS.
In the grid-cols-* class, you specify the number of columns you want to create.
If you will use both classes (grid-rows-*,grid-cols-*) in your grid, then each grid height will be equal to the grid’s height which has maximum length content.
We will use the grid-cols-* method and will create a grid, where each grid item will be of size auto.

We will use the Tailwind CSS CDN link to use the tailwind stylesheets in our code. Create an HTML file and copy/paste the following CDN link in the head section of the HTML file.

Tailwind CSS CDN Link:

<link href=”https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css” rel=”stylesheet”>

Create a grid layout using the HTML div tag and some content in each grid item. For grid-container, specify class “grid grid-cols-2” which means we are creating a grid and there will be two columns.

Syntax:

<element class="grid grid-cols-number"> 
    ...
</element>

Example 1: The following code demonstrates the class “grid grid-cols-2“. Each row is different in height depending on the maximum height required by the grid for that particular row.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <!-- TAILWIND CSS CDN LINK -->
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
</head>
 
<body>
    <p class="text-2xl text-center text-green-700">
        GeeksforGeeks
    </p>
    <div class="grid grid-cols-2">
        <div class="bg-pink-400 m-2 text-xs text-center">
            <p class="text-indigo-800 text-base">Opportunity</p>
            <ul>
                <li>Write & Earn</li>
            </ul>
        </div>
        <div class="bg-pink-400 m-2 text-xs text-center">
            <p class = "text-indigo-800 text-base">Highlights</p>
            <ul>
                <li>Data Structures and Algorithms</li>
                <li>Interview Preparation</li>
                <li>Topicwise Practice</li>
                <li>Competitive Programming</li>
            </ul>
        </div>
        <div class="bg-pink-400 m-2 text-xs text-center">
            <p class="text-indigo-800 text-base">Web Development</p>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </div>
 
        <div class="bg-orange-400 m-2 text-xs text-center">
            <p class="text-indigo-800 text-base">Courses</p>
            <ul>
                <li>For Working Professionals</li>
                <li>For Students</li>
                <li>Programming Languages</li>
                <li>Web Development</li>
                <li>Machine Learning and Data Science</li>
            </ul>
        </div>
    </div>
</body>
</html>

Output:

Example 2: The class “grid grid-cols-3” on the container will create the three columns and this container will act as a grid. Each element’s height will depend on the maximum content of the grid item in a single row.

Suppose a grid item in a row has a maximum of 20 <li> elements, so each grid item’s height in that row will be equal to the height of that grid item which has 20 <li> elements. In the grid output, we have two rows and row1’s second grid item size is equal to the content in the grid item, so each grid item in row1 has a height equal to the second grid item height.

Similarly in row 2, the first grid item “Courses” height is maximum, so the next grid item’s height is also equal to that item’s height only.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <!-- TAILWIND CSS CDN LINK -->
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet">
</head>
 
<body>
    <p class="text-2xl text-center text-green-700" >
        GeeksforGeeks
    </p>
    <div class="grid grid-cols-3">
        <div class="bg-pink-400 m-2 
                text-xs text-center">
            <p class="text-indigo-800 text-base" >
                Opportunity
            </p>
            <ul>
                <li>Write & Earn</li>
            </ul>
        </div>
        <div class="bg-pink-400 m-2 
                    text-xs text-center">
            <p class="text-indigo-800 text-base" >
                Highlights
            </p>
            <ul>
                <li>Data Structures and Algorithms</li>
                <li>Interview Preparation</li>
                <li>Topicwise Practice</li>
                <li>Competitive Programming</li>
            </ul>
        </div>
        <div class="bg-pink-400 m-2 
                    text-xs text-center">
            <p class="text-indigo-800 text-base" >
                Web Development
            </p>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </div>
        <div class="bg-orange-400 m-2 
                    text-xs text-center">
            <p class="text-indigo-800 text-base" >
                Courses
            </p>
            <ul>
                <li>For Working Professionals</li>
                <li>For Students</li>
                <li>Programming Languages</li>
                <li>Web Development</li>
                <li>Machine Learning and Data Science</li>
            </ul>
        </div>
 
        <div class="bg-orange-400 m-2 text-xs">
            <p class="text-indigo-800 text-base" >
                Python
            </p>
            <ul>
                <li>Machine Learning</li>
            </ul>
        </div>
    </div>
</body>
</html>