CSS grid-row-end attribute

Definition and usage

The grid-row-end property specifies how many rows the item will span or at which line the item will end.

See the examples at the end of the page.

See also:

CSS Tutorial:CSS Grid Layout

Example

Example 1

To make "item1" span three rows:

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

Try it yourself

Example 2

You can use the line value instead of the number of rows to span:

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

Try it yourself

CSS syntax

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

Attribute value

Value Description
auto Default value. The item will span one row.
span n Specifies the number of rows the item will span.
column-line Specifies from which line the display of the item ends.

Technical details

Default value: auto
Inheritance: No
Animation creation: Supported. See also:Animation-related properties.
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridRowEnd="4"

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44