CSS grid-auto-rows Property

Set a default size for the rows in a grid:

.grid-container {
display: grid;
grid-auto-rows: 150px;
}

Definition and Usage

The grid-auto-rows property sets a size for the rows in a grid container.

This property affects only rows with the size not set.

Default value:	auto
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS Grid Layout Module Level 1
JavaScript syntax:	object.style.gridAutoRows="60px" Try it

The numbers in the table specify the first browser version that fully supports the property.

Property
grid-auto-rows	57	16	52	10	44

grid-auto-rows: auto|max-content|min-content|length;

Value	Description	Demo
auto	Default value. The size of the rows is determined by the size of the largest item in the row	Demo ❯
max-content	Sets the size of each row to depend on the largest item in the row	Demo ❯
min-content	Sets the size of each row to depend on the smallest item in the row	Demo ❯
length	Sets the size of the rows, by using a legal length value. Read about length units	Demo ❯

CSS Reference: The grid-auto-columns property