CSS grid-row-end Property

Make "item1" span 3 rows:

.item1 {
grid-row-end: span 3;
}

Definition and Usage

The grid-row-end property defines how many rows an item will span, or on which row-line the item will end (see example at the end of this page).

Default value:	auto
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS Grid Layout Module Level 1
JavaScript syntax:	object.style.gridRowEnd="4" Try it

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

Property
grid-row-end	57	16	52	10	44

grid-row-end: auto|row-line|span n;

Value	Description	Demo
auto	Default value. The item will span one row.	Demo ❯
span n	Specifies the number of rows the item will span.	Demo ❯
row-line	Specifies on which row to end the display of the item.	Demo ❯

You can use row-line values instead numbers of rows to span:

.item1 {
grid-row-end: 3;
}