CSS grid-template-rows

The grid-template-rows property in CSS is used to define the size of the rows in a grid layout. This property allows you to specify the height of each row in the grid individually.

Here is the syntax for using grid-template-rows:


grid-template-rows: value1 value2 ...;

Each value specifies the height of a row in the grid. You can use different units to define the height such as pixels, percentages, or fractions.

Let's see an example to better understand how grid-template-rows works:

Result:

Row 1

Row 2

Row 3

In this example, we have a grid layout with three rows. The first row has a height of 100 pixels, the second row takes up one fraction of the available space, and the third row takes up two fractions of the available space.

By using grid-template-rows, you can easily customize the layout of your grid by specifying the height of each row according to your design requirements.