CSS grid-column-start Property

CSS grid-column-start property specifies the column-line on which a grid item will start within the grid container.

By default, each grid item is placed according to the normal flow of the layout. That is, the very first grid item by default starts at column-line 1, then the second item on column-line 2, and so on until the row is full with grid items. Once the first row is full with grid items, the next item is again placed on the first column-line but second row, and so on.

But using the grid-column-start property we can specify the column-line on which a grid item must start.

In the example below, we have used grid-column-start: 2; for the very first grid item(item1). Therefore, this item will start at column-line 2 instead of column-line 1.Try it out:

Example:

#item1{
  grid-column-start: 2;
}

We can also use span keyword to define how many columns a grid item should span. In this case, the grid item always starts at column-line 1 and spans the next columns.

For example, if we use grid-column-start: span 3;, the grid item will start at column-line 1 and span the next 3 columns. See the example below:

Example:

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

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


CSS Syntax

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

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

Property Values

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

autoThis is the default value. The grid items are positioned according to the normal flow of the layout.
numberSpecifies the starting column-line of a grid item.
span numberDefines how many columns the grid item will span.
initialSets the grid-column-start property to its default value(auto).
inheritInherits the grid-column-start property from the parent element.

General Info

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