Tailwind CSS - Grid Auto Rows


Tailwind CSS Grid Auto Rows is a utility class specifying the size of grid rows that are created implicitly.

Tailwind CSS Grid Auto Rows Classes

The following is the list of Tailwind CSS Grid Auto Rows classes used to set the size of implicitly created grid rows.

Class CSS Properties
auto-rows-auto grid-auto-rows: auto;
auto-rows-min grid-auto-rows: min-content;
auto-rows-max grid-auto-rows: max-content;
auto-rows-fr grid-auto-rows: minmax(0, 1fr);

Functionality of Tailwind CSS Grid Auto Rows Classes

  • auto-rows-auto:This class is used to set the height of grid rows to the height of its content.
  • auto-rows-min: This class used to set the height of a grid row to the minimum height needed to fit its content.
  • auto-rows-max: This class is used to set the height of grid rows to the maximum height needed to fit its content.
  • auto-rows-fr This class is used to set the rows height based on the equal fraction of the space available.

Tailwind CSS Grid Auto Rows Classes Examples

The following examples will illustrate the Tailwind CSS Grid Auto Rows class utility.

Resizing auto-created grid Rows

The auto-rows-auto utility is used to automatically resize the explicitly created grid rows, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Auto Rows Auto Class
    </h2>
    <div class="grid grid-cols-3 auto-rows-auto gap-4">
        <div class="bg-green-200 p-4">Item 1</div>
        <div class="bg-green-300 p-4">Item 2 with more content</div>
        <div class="bg-green-400 p-4">Item 3</div>
        <div class="bg-green-500 p-4">
            Item 4 with even more content than Item 2
        </div>
    </div>
</body>

</html>

Fractioning auto-created grid Rows Height

The auto-rows-fr utility is used to automatically resize the explicitly created grid rows, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Auto Rows Fr Class
    </h2>
    <div class="grid grid-cols-3 auto-rows-fr gap-4">
        <div class="bg-green-200 p-4">Item 1</div>
        <div class="bg-green-300 p-4">Item 2 with more content</div>
        <div class="bg-green-400 p-4">Item 3</div>
        <div class="bg-green-500 p-4">
            Item 4 with even more content than Item 2
        </div>
    </div>
</body>

</html>