CSS `grid-column` Property

Example

Set "item1" to start at column 1 and end before column 5:

.item1 {
  grid-column: 1 / 5;
}

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

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

The grid-column property defines the start and end positions of a grid item in the column.

Note: The grid-column property is a shorthand for the grid-column-start and grid-column-end properties.

You can refer to line numbers to set the grid item, or use the keyword "span" to define how many columns the item will span.

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

grid-column: grid-column-start / grid-column-end;

Value	Description
grid-column-start	Specifies the column where the grid item starts.
grid-column-end	Specifies the column where the grid item ends, or how many columns it spans.

The following example sets "item1" to span 3 columns:

.item1 {
  grid-column: 1 / span 3;
}

The following example sets "item2" to span 3 columns:

.item2 {
  grid-column: 2 / span 3;
}