CSS grid-template-rows Property

Last Updated : 11 Jul, 2025

The grid-template-rows property in CSS defines the number and height of rows in a grid layout. It accepts values like none, auto, max-content, min-content, and specific lengths, allowing for flexible and responsive design customization.

Syntax

grid-template-rows: none|auto|max-content|
                    min-content|length|
                    initial|inherit;

Property Values

Value	Description
none	Do not set the height of the `grid-template-row` property; creates rows when content dictates.
auto	Sets the row size automatically based on container and content size.
max-content	Sizes the row to accommodate the maximum content within the grid items.
min-content	Sizes the row to accommodate the minimum content within the grid items.
length	Sets the size of the row according to the specified length (e.g., `px`, `em`, etc.).

Example 1: Using auto and length Values

In this example, we create a grid layout with 4 columns and 2 rows, each cell containing a letter from A to H, styled with background colors and borders.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS grid-template-rows Property
    </title>

    <style>
        .geeks {
            background-color: green;
            padding: 30px;
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-template-rows: auto auto;
            grid-gap: 10px;
        }

        .GFG {
            background-color: white;
            border: 1px solid white;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="geeks">
        <div class="GFG">A</div>
        <div class="GFG">B</div>
        <div class="GFG">C</div>
        <div class="GFG">D</div>
        <div class="GFG">E</div>
        <div class="GFG">F</div>
        <div class="GFG">G</div>
        <div class="GFG">H</div>
    </div>
</body>

</html>

Output:

Example 2: Using min-content and max-content Values

In this example we creates a grid layout with 4 columns and 2 rows. The first row adjusts automatically, and the second row is fixed at 150px, displaying letters A to H in styled cells.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS grid-template-rows Property
    </title>

    <style>
        .geeks {
            background-color: green;
            padding: 30px;
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-template-rows: auto 150px;
            grid-gap: 10px;
        }

        .GFG {
            background-color: white;
            border: 1px solid white;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="geeks">
        <div class="GFG">A</div>
        <div class="GFG">B</div>
        <div class="GFG">C</div>
        <div class="GFG">D</div>
        <div class="GFG">E</div>
        <div class="GFG">F</div>
        <div class="GFG">G</div>
        <div class="GFG">H</div>
    </div>
</body>

</html>