In this section, we will learn what the grid-template-rows property is and how to use it in CSS.

Click here to run the example of grid-template-rows property.

CSS grid-template-rows Property Definition and Usage

In grid system, the area between two horizontal lines that move along each other is called track (AKA row).

Now, when we use a grid system in our design, we need to set the number of rows for that grid as well.

This is done with the help of a CSS property called `grid-template-rows`.

Note: In a grid system, there’s another property named `grid-auto-rows` that is used for creating implicit rows and if set, browsers will create a new row when it’s needed.

CSS grid-template-rows Property Syntax

grid-template-rows: first-row-height second-row-height nth-row-height;

CSS grid-template-rows Property Value

Any number we set for the value of `grid-template-rows` it represents the width of a new column.

So, for example, if we set 3 different values for this property, it means we need three rows for the target grid with the specified height for each row.

For example:

grid-template-rows: 10vh 200px 15em;

In the example above, first of all, the order is to create 3 rows because we used 3 values for this property.

Secondly, it means:

• The first row should have the height of 10vh (10 percent of the viewport height).
• The second row should have the height of 200px.
• The third row should have the height of 15em.

Note: By default, a grid system has one column and one row and if we want to increase the number of columns, we can use the CSS property`grid-template-columns` which you can read about it in its section.

We can also set name for one or multiple lines between each row.

Here’s the syntax:

grid-template-rows: [line-one-name line-one-another-name] 100px [line-two-name] 200px [line-x-name]

As you can see, in order to set a name for each line, we should use open and close brackets and within these brackets we can set one or multiple names for one line. Each name is separated using a white space.

We can use these names just like numbers when we want to position a grid-item in a specific place on the grid.

The advantage of using names over numbers is the fact that names can help developers recognize what line belongs to what area of that grid.

Example: grid-template-rows property in CSS

See the Pen grid-template-rows property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does grid-template-rows property work in CSS?

Note: You should know that when we have more elements than available rows to be positioned within, browsers add new rows, but the size of those rows is just big enough to hold the remained grid-items.

In the example above, we have the situation where 2 of the elements stayed out of the explicitly declared rows and so two new rows are created by the browser in order to hold these two remained items. And as you can see, the height of these two rows is equal to the height-size of the items within them.

Example: creating columns with names using CSS grid-template-columns property

See the Pen creating columns with names using CSS grid-template-columns property by Omid Dehghan (@enjoytutorials1) on CodePen.

Note: the `fr` unit, `minmax()` and `repeat( )` functions are also related to `grid-template-rows` so make sure you read those sections as well.