CSS grid-row-end attribute

Definition and Usage

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

See the examples at the bottom 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 a single 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