grid-auto-rows

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

Syntax

The grid-auto-rows property only affects rows that do not have a set size.

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

Values

auto
Default value. The rows’ sizes are determined by the size of the largest item in the row.

max-content
The largest item in the row sets the size of each row.

min-content
The smallest item in the row sets the size of each row.

length
Designates the size of the rows in px, cm, em, rem, etc.

Browser Compatibilty

Demos

Have a code example of grid-auto-rows? Submit a codepen.io demo and we'll showcase it here ↴