CSS grid-column Property

CSS grid-column property specifies the start and end column lines for a grid item within its grid container. It is a shorthand of below two properties:

The start and end position is separated by a slash(/).

If we apply the below property on an item :

grid-column: 1 / 3;

This means:

  • The grid item will start on the first column-line.
  • The grid item will end at the third column-line. That is, it will span starting from the first column-line to the third column-line.

Example:

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

We can also use the span keyword to specify the start and end position of a grid item.

In the example below, we have used grid-column: 1/ span 3;. This means that the grid item will start on the first column-line and then spans next three columns:

Example:

#item{
  grid-column: 1/span 3;
}

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


CSS Syntax

The grid-column property has the following syntax:

grid-column: grid-column-start grid-column-end|initial|inherit;

Property Values

The grid-column property accepts the following set values:

grid-column-startSpecifies the column-line on which a grid item starts. The default value is auto.
grid-column-endSpecifies the column-line on which a grid item ends. The default value is auto.
initialSets the grid-column property to its default value.
inheritInherits the grid-column property from the parent element.

General Info

Default Valueauto/auto
InheritedNo
JavaScript Usageelement.style.gridColumn = “1/3”