Definition
The grid-template-rows CSS property is used in grid layouts to define the size and number of rows in a grid container.
The grid-template-rows property accepts a list of values that represent the height of each row. You can specify the height using length values (e.g., pixels or percentages), fractional units (e.g., fr), or the auto keyword. Additionally, you can use the repeat() function to specify a repeated pattern of row sizes.
Here’s an example:
.grid-container {
display: grid;
grid-template-rows: 100px 1fr 200px;
}
In this example, the grid-template-rows: 100px 1fr 200px; rule sets up a grid layout with three rows. The first row has a height of 100px, the second row takes up the remaining available space with a 1fr unit, and the third row has a fixed height of 200px.
Using grid-template-rows, you can create flexible and responsive grid layouts, defining the height of each row based on your design requirements. It allows for the creation of grid structures that adapt to different screen sizes and content heights.