CSS grid-column property

Definition and Usage

The grid-column property specifies the size of the grid item and its position in the grid layout, and it is a shorthand for the following properties:

See Also:

CSS Tutorial:CSS Grid Layout

Example

Example 1

To make "item1" start at column 1 and span two columns:

.item1 {
  grid-column: 1 / span 2;
}

Try It Yourself

Example 2

You can use the column line value instead of the number of columns to span:

.item1 {
  grid-column: 1 / 3;
}

Try It Yourself

CSS Syntax

grid-column: grid-column-start / grid-column-end;

Attribute Value

Value Description
grid-column-start Specifies from which column to start displaying items.
grid-column-end Specifies which column line (column-line) to stop displaying items on, or how many columns to span.

Technical Details

Default Value: auto / auto
Inheritance: No
Animation Production: Supported. Please refer to:Animation-related Properties.
Version: CSS Grid Layout Module Level 1
JavaScript Syntax: object.style.gridColumn="2 / span 2"

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