Definition
The grid-auto-rows CSS property is used in grid layouts to set the height of implicitly created rows when the grid items do not explicitly specify their own row heights.
The grid-auto-rows property accepts a value or a series of values, such as length values (e.g., 200px, auto), percentage values (e.g., 50%), or minmax() functions (e.g., minmax(100px, 1fr)).
Here’s an example:
.grid-container {
display: grid;
grid-auto-rows: 100px;
}
In this example, the grid-auto-rows: 100px; rule sets the height of implicitly created rows in a grid container to 100 pixels. When grid items do not explicitly specify their own row heights, these rows will be automatically created with a height of 100 pixels.
The grid-auto-rows property allows for control over the sizing of implicitly created rows in grid layouts, ensuring consistent row heights and helping to achieve the desired grid structure.