CSS grid-column Property

Make "item1" start on column 1 and span 2 columns:

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

Definition and Usage

The grid-column property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties:

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

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

Property
grid-column	57	16	52	10	44

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

Value	Description	Demo
grid-column-start	Specifies on which column to start displaying the item.	Demo ❯
grid-column-end	Specifies on which column-line to stop displaying the item, or how many columns to span.	Demo ❯

You can use column-line values instead numbers of columns to span:

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