Easy Tutorial
❮ Css Inherit Pr Class Cursor ❯

CSS grid-column-start Property

Example

Set "item1" to start from the second column:

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

Browser Support

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

Property Chrome Edge Firefox Safari Opera
grid-column-start 57 16 52 10 44

Property Definition and Usage

The grid-column-start property defines which column to start the display of a grid element.

Default value: auto
Inherited: no
Animatable: Yes. Read about animatable Try it
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridColumnStart="3" Try it

Syntax

grid-column-start: auto|span n|column-line;
Value Description
auto Default value, the grid item is flowed into the position.
span n Specifies the number of columns the grid item will span.
column-line Specifies the column line where the grid item starts.

Related Articles

CSS Tutorial: CSS Grid Layout

CSS Reference: grid-column Property

CSS Reference: grid-column-end Property

CSS Reference: grid-row-start Property

CSS Reference: grid-row-end Property

❮ Css Inherit Pr Class Cursor ❯