grid-template-rows

The grid-template-rows property designates the number and heights of the rows in a grid layout.

Syntax

The height of each row is specified in a space separated list of values. First value is for the first row, second value for the second row, and so on.

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

Values

none
Default value. No height is set and rows are created as necessary.

auto
The size of the container and the size of the content of the items in the row determines the size of the rows.

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

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

length
Designates the row’s size in px, cm, em, rem, etc.

Browser Compatibilty

Demos

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