CSS `grid-template-rows` Property

Example

Specify row sizes (heights):

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

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

Property	Chrome	Edge	Firefox	Safari	Opera
grid-template-rows	57	16	52	10	44

The grid-template-rows property is used to define the number and heights of rows in a grid layout.

These values are a space-separated list, where each value specifies the height of the corresponding row.

Default value:	auto
Inherited:	no
---	---
Animatable:	Yes. Read about animatable Try it
---	---
Version:	CSS Grid Layout Module Level 1
---	---
JavaScript syntax:	object.style.gridTemplateRows="50px 200px" Try it
---	---

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

Value	Description
none	Default value, no specific row sizes are specified.
auto	The row size is determined by the size of the container and the size of the grid items in the row.
max-content	Each row is sized to fit the largest grid item in that row.
min-content	Each row is sized to fit the smallest grid item in that row.
length	A length value, which can be in px or percentage %. 0 is the default value. Learn more about length units
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

CSS Reference: grid-columns Property

CSS Reference: grid-template Property