CSS `grid-column-end` Property

Example

Set "item1" to span 3 columns:

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

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

Property	Chrome	Edge	Firefox	Safari	Opera
grid-column-end	57	16	52	10	44

The grid-column-end property defines how many columns an item spans or on which column-line it ends.

Default value:	auto
Inherited:	no
---	---
Animatable:	Yes. Read about animatable Try it
---	---
Version:	CSS Grid Layout Module Level 1
---	---
JavaScript syntax:	`object.style.gridColumnEnd="5"` Try it
---	---

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

Value	Description
auto	Default value, the item spans one column.
span n	Specifies the number of columns the item will span.
column-line	Specifies the column line on which the item starts.

Set the grid item to end at the third column:

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

CSS Reference: grid-column Property

CSS Reference: grid-column-start Property

CSS Reference: grid-row-start Property

CSS Reference: grid-row-end Property