CSS grid-template-rows attribute

Definition and usage

grid-template-rows specifies the number of rows (and height) in the grid layout.

The values are a list separated by spaces, where each value specifies the height of the corresponding row.

See also:

CSS Tutorial:CSS Grid Layout

CSS Reference Manual:grid-columns property

CSS Reference Manual:grid-template property

Example

Define row-size (height):

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

Try it yourself

CSS syntax

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

Attribute value

Value Description
none Size not set. Create rows as needed.
auto The size of the row depends on the size of the container and the size of the item content 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 minimum item in the row.
length Set the row size by using valid length values. SeeLength units.

Technical details

Default value: none
Inheritance: No
Animation creation: Supported. See also:Animation-related properties.
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridTemplateRows="50px 200px"

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