CSS grid-row-end Property

CSS grid-row-end property specifies the row-line on which a grid item should end within the grid container.

In the example below, the very first grid item(item1) ends on row-line 3 instead of ending on row-line 2(default for this item). This is because we have used grid-row-end: 3; which overwrites its default behavior.

Example:

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

Note that each grid item by default spans only one row. But, we can overwrite this default behavior using the grid-row-end property.

The grid-row-end property can be used to specify how many rows an item should span within the grid container. This is done with the help of the span keyword.

For example, If we use grid-row-end: span 3; for the very first grid item(item1), the grid item will start on its default row-line(row-line 1) and span 3 rows vertically downward. See the example below:

Example:

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

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


CSS Syntax

The grid-row-end property has the following syntax:

grid-row-end: auto|number|span number|initial|inherit;

Property Values

The grid-row-end property accepts the following values:

autoThis is the default value. The grid items end at their default row-lines.
numberSpecify on which row-line a grid item should end.
span numberSpecify how many rows a grid item should span. By default, each grid item spans only one row.
initialSets the grid-row-end property to its default value(auto).
inheritInherits the grid-row-end property from the parent element.

General Info

Default Valueauto
InheritedNo
JavaScript Usageelement.style.gridRowEnd = “3”