Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Grid Auto Rows

Quiz

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>

Print Page