CSS grid-column-start property

Definition and Usage

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

See also:

CSS Tutorial:CSS Grid Layout

CSS Reference Manual:grid-column property

CSS Reference Manual:grid-column-end property

CSS Reference Manual:grid-row-start property

CSS Reference Manual:grid-row-end property

Example

Make "item1" start from column 2:

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

Try It Yourself

CSS Syntax

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

Attribute Value

Value Description
auto Default Value. The item will follow the flow placement.
span n Specifies the number of columns the item will span.
column-line Specifies from which column the item should be displayed.

Technical Details

Default Value: auto
Inheritance: No
Animation Production: Supported. See also:Animation-related properties.
Version: CSS Grid Layout Module Level 1
JavaScript Syntax: object.style.gridColumnStart="3"

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44