CSS grid-row Property

CSS grid-row property specifies the start and end position of a grid item within its grid container. It is a shorthand of below two properties:

The start and end position is separated by a slash(/).

If we apply the below property on an item :

grid-row: 1 / 3;

This means:

  • The grid item will start on the first row-line.
  • The grid item will end at the third row-line. That is, it will span starting from the first row-line to the third row-line.

Example:

#item1{
  grid-row: 1/3;
}

We can also use span keyword to specify start and end position of a grid item.

In the example below, we have used grid-row: 1/ span 3;. This means that the grid item will start on the first row-line and span the next three rows:

Example:

#item{
  grid-row: 1/span 3;
}

Note: span 3 is same as 3 span. You can use it either way.


CSS Syntax

The grid-row property has the following syntax:

grid-row: grid-row-start grid-row-end|initial|inherit;

Property Values

The grid-row property accepts the following set values:

grid-row-startSpecifies the row-line on which a grid item starts. The default value is auto.
grid-row-endSpecifies the row-line on which a grid item ends. The default value is auto.
initialSets the grid-row property to its default value.
inheritInherits the grid-row property from the parent element.

General Info

Default Valueauto/auto
InheritedNo
JavaScript Usageelement.style.gridRow = “1/3”