CSS grid-template-rows Property

CSS grid-template-rows property defines the number of rows and their respective height in a grid layout.

This property takes a list of space-separated values. Each value defines a row and its height within the grid container. The total number of values passed to the grid-template-rows property determines the total number of rows in the layout.

For example, If we use grid-template-rows: auto auto auto;, it will create 3 rows, each of the same height(auto) within the grid container. Try it out:

Example:

.grid-container{
  display: grid;
  grid-template-rows: auto auto auto;
}

We can also set each row’s height individually. It can be specified in any valid CSS length formats such as ‘px’, ’em’, ‘rem’, etc. For example:

grid-template-rows: auto 200px 10rem;

The above code means:

  • Row 1(auto): The first row will have an auto height i.e. It will fit in the available space
  • Row 2(‘200px’): The second row will be of 200px height
  • Row 3(’10rem’): The third row will be of 10rem height

Example:

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

There is one more interesting unit fr that is generally used with CSS grids. The fr is a short form of ‘fraction’. The fr unit represents the ‘fraction of the available space’. We can think of it as a percentage(%) of available space. For example:

grid-template-rows: 200px 1fr 2fr;

The code above represents that:

  • Row 1(‘200px’): The first row will be of 200px height
  • Row 2(‘1fr’): The second row will take up 1 fraction of the available space(total_space – 200px) i.e, 1fr/(1fr+2fr) = 33.33% of the available height.
  • Row 3(‘2fr’): The third row will take up 2 fraction of the available space(total_space – 200px) i.e, 2fr/(1fr+2fr) = 66.66% of the available height. This means that the third row will be twice as much higher as the second row.

Example:

.grid-container{
  display: grid;
  grid-template-rows: 200px 1fr 2fr;
}

CSS Syntax

The grid-template-rows property has the following syntax:

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

Property Values

The grid-template-rows property accepts the following values:

noneThis is the default value. New rows are created if needed.
autoThe browser itself calculates the height of the rows.
lengthSets the height of the rows in any valid CSS length formats such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.
max-contentSpecifies that the row will take up the maximum possible height within the grid container.
min-contentSpecifies that the row will take up the minimum possible height within the grid container.
initialSets the grid-template-rows property to its default value(none).
inheritInherits the grid-template-rows property from the parent element.

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.gridTemplateRows = “auto auto auto”