CSS grid-auto-rows property

Definition and Usage

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

This property only affects rows that have not been set with a size.

See also:

CSS Tutorial:CSS Grid Layout

CSS Reference Manual:grid-auto-columns Property

Example

Set the default size of the rows in the grid:

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

Try It Yourself

CSS Syntax

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

Attribute Value

Value Description
auto Default Value. The size of the row is determined by the size of the largest item in the row.
max-content Set the size of each row based on the maximum item in the row.
min-content Set the size of each row based on the maximum item in the row.
length Set the size of the rows by using a valid length value. SeeLength Units.

Technical Details

Default Value: auto
Inheritance: No
Animation Creation: Supported. See also:Animation-related Properties.
Version: CSS Grid Layout Module Level 1
JavaScript Syntax: object.style.gridAutoRows="60px"

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44