CSS `grid-row` Property

Example

The following example sets "item1" to span two rows:

.item1 {
  grid-row: 1 / span 2;
}

The numbers in the table specify the first browser version that fully supports the property.

Property	Chrome	Firefox	Safari	Opera	Edge
grid-row	57	16	52	10	44

The grid-row property defines the start and end positions of a grid item's row.

Note: The grid-row property is a shorthand for the grid-row-start and grid-row-end properties.

You can refer to line numbers to place grid items, or use the keyword "span" to define how many rows the item will span.

Default value:	auto
Inherited:	no
---	---
Animatable:	Yes. Read about animatable Try it
---	---
Version:	CSS Grid Layout Module Level 1
---	---
JavaScript syntax:	object.style.gridRow="2 / span 2" Try it
---	---

grid-row: grid-row-start / grid-row-end;

Value	Description
grid-row-start	Specifies on which row to start displaying the grid item.
grid-row-end	Specifies on which row to stop displaying the grid item, or how many rows to span.

The following example sets "item1" to start at row 1 and end before row 4:

.item1 {
  grid-row: 1 / 4;
}