Tailwind CSS - Grid Template Rows

Previous
Quiz
Next

Tailwind CSS Grid Template Rows is a utility class that specifies the number and size of rows in a grid layout.

Tailwind CSS Grid Template Rows Classes

The following is the list of Tailwind CSS Grid Template Rows classes that defines the rows in grid layout.

Class CSS Properties
grid-rows-1 grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2 grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3 grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4 grid-template-rows: repeat(4, minmax(0, 1fr));
grid-rows-5 grid-template-rows: repeat(5, minmax(0, 1fr));
grid-rows-6 grid-template-rows: repeat(6, minmax(0, 1fr));
grid-rows-7 grid-template-rows: repeat(7, minmax(0, 1fr));
grid-rows-8 grid-template-rows: repeat(8, minmax(0, 1fr));
grid-rows-9 grid-template-rows: repeat(9, minmax(0, 1fr));
grid-rows-10 grid-template-rows: repeat(10, minmax(0, 1fr));
grid-rows-11 grid-template-rows: repeat(11, minmax(0, 1fr));
grid-rows-12 grid-template-rows: repeat(12, minmax(0, 1fr));
grid-rows-none grid-template-rows: none;
grid-rows-subgrid grid-template-rows: subgrid;

Functionality of Tailwind CSS Grid Template Rows

  • grid-rows-*: This class is used to create a grid layout with a specified number of equally sized rows, with {*} representing the count of rows ranging from 1 to 12.
  • grid-rows-none: This class replaces the CSS grid-template-rows: none; property and is used to disable the row utility for grid layout.
  • grid-rows-subgrid: This class replaces the CSS grid-template-rows: subgrid; property and allows a grid item to inherit the grid row tracks from its parent grid.

Tailwind CSS Grid Template Rows Class Examples

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

Defining The Rows In a Grid

Use grid-rows-* classes to make a grid with n rows that are all the same size, as demonstrated below.

Example

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Rows 3 
    </h2>
    <div class="grid grid-rows-3 gap-4">
        <div class="bg-green-400 p-4">Row 1</div>
        <div class="bg-green-300 p-4">Row 2</div>
        <div class="bg-green-200 p-4">Row 3</div>
    </div>
</body>

</html>

Defining Subgrid

Use grid-rows-subgrid to align with the row tracks set by the parent item, as demonstrated below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
 
<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Rows Subgrid
    </h2>
    <div class="grid grid-rows-4 gap-4 p-4">
        <div class="bg-green-400">1</div>
        <div class="bg-green-400">2</div>
        <div class="grid grid-rows-subgrid gap-4 
                    row-span-3 bg-green-200 p-4">
            <div class="row-start-2 bg-green-300">
                Subgrid Item 1
            </div>
            <div class="bg-green-400">
                Subgrid Item 2
            </div>
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next