CSS grid-template-rows Property


The grid-template-rows property in CSS is used to set the number of rows and height of the rows in a grid. The values of grid-template-rows are space-separated, where each value represents the height of the row.

The grid-template-rows property specifies the number (and the heights) of the rows in a grid layout.

CSS Syntax

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

Defines the rows of a grid container. You can specify the width of a row by using a keyword (like auto) or a length (like 10px). The number of rows is determined by the number of values defined in the space-separated list.

Supported Browsers:

  • Firefox: 52.0, 2.0 -moz-
  • Google Chrome: 50.0, 4.0 -webkit-
  • Internet Explorer: 10.0
  • Safari: 9.0, 3.1 -webkit-
  • Opera: 37.0, 15.0 -webkit-, 11.1

Example -