CSS grid-column-startProperty


Example

Set "item1" to start at column 2:

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

Try it Yourself »

Browser Support

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

Property
grid-column-start 57 16 52 10 44

Property definition and usage instructions

The grid-column-start property defines on which column the grid item will start.

Default Value: auto
Inherited: no
animation: Supported.Read Aboutanimatable Try it Yourself
version: CSS Grid Layout Module Level 1
JavaScript Syntax: object.style.gridColumnStart="3" Try it Yourself


Syntax

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

Value Description
auto Default value; grid items are set according to flow.
span n Specifies the number of columns a grid item will span.
column-line Specifies which column to start displaying the grid item on.

Related Articles

CSS Tutorial:CSS Grid Layout

CSS Reference Manual:grid-columnProperty

CSS Reference Manual:grid-column-endProperty

CSS Reference Manual:grid-row-startProperty

CSS Reference Manual:grid-row-endProperty

other extensions