🎯 CSS grid-template-rows Property

The grid-template-rows property is a CSS Grid feature used to define the height of rows within a grid container.

It allows developers to create structured layouts by controlling how tall each row should be. Row heights can be fixed, flexible, or automatically adjusted according to the content.

No explicit row sizes are defined. The browser automatically determines row heights based on its default behavior.

.container {
    grid-template-rows: none;
}
                

Row heights are automatically calculated according to the content inside each row.

.container {
    grid-template-rows: auto auto;
}
                

The row expands to fit the maximum size required by its content.

.container {
    grid-template-rows: max-content;
}
                

The row shrinks to the minimum height required to display its content.

.container {
    grid-template-rows: min-content;
}
                

You can define row heights using units such as px, %, fr, and rem.

.container {
    grid-template-rows: 100px 200px;
}

.container {
    grid-template-rows: 50% 50%;
}

.container {
    grid-template-rows: 1fr 3fr;
}
                

Fixed units create exact row heights, percentages distribute space proportionally, and the fr unit allocates available space dynamically.

Resets the property back to its default browser value.

.container {
    grid-template-rows: initial;
}
                

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px auto 200px;
}
                

In this example, the first row has a height of 100px, the second row adjusts automatically based on its content, and the third row has a fixed height of 200px.