CSS grid-template-rows property

Description

CSS grid-template-rows represents number of rows with their sizes. Rows are separated with a space.


In the following demo, we have a grid item (green box) that occupies the second row of the grid i.e. from grid line 2 to 3. We'll specify variable number of rows with different sizes in the grid.

Syntax

grid-template-rows : row-size1    row-size2    row-size3 ..

Property values

row1 row2Default

The grid consists of two rows each with 50% width. The item occupies the second row (50%).

template-rows

grid-template-rows: 50% 50%;

row1 row2 row3

The grid consists of three rows with 20px, 30%, and 1fr sizes. 1fr means remaining fractional size. The item occupies the second row (30%).

three rows grid

grid-template-rows: 20px 30% 1fr;

row1 row2 row3

The grid consists of three rows with 30px, 50px, and 1fr sizes. The item occupies the second row (50px).

three rows grid

grid-template-rows: 30px 50px 1fr;

Applicable to

It applies to grid-containers.

#CSS digger
Was this article helpful?

 
arrow
It represents number of rows with their sizes. Rows are separated with a space.
×

Ctrl+D