CSS grid-column-end Property

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

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

Example:

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

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

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

For example, If we apply grid-column-end: span 3; on the very first grid item(item1), the grid item will start on its default column-line(column-line 1) and spans next 3 columns.

Example:

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

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


CSS Syntax

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

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

Property Values

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

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

General Info

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