CSS grid-column-start Property


Example

Make "item1" start on column 2:

.item1 {
  grid-column-start: 2;
}
Try it Yourself »

Definition and Usage

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

Show demo ❯

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

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


CSS Syntax

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

Property Values

Value Description Demo
auto Default value. The item will be placed following the flow Demo ❯
span n Specifies the number of columns the item will span Demo ❯
column-line Specifies on which column to
start the display of the item
Demo ❯

Related Pages

CSS tutorial: CSS Grid Layout

CSS reference: The grid-column Property

CSS reference: The grid-column-end Property

CSS reference: The grid-row-start Property

CSS reference: The grid-row-end Property


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.