CSS grid-column-end property

Definition and Usage

The grid-column-end property specifies how many columns the item will span or where the item will end on a column-line (column-line).

See the examples at the end of the page.

See also:

CSS Tutorial:CSS Grid Layout

Example

Example 1

To span the "item1" across three columns:

.item1 {
  grid-column-end: span 3;
}

Try It Yourself

Example 2

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

.item1 {
  grid-column-end: 3;
}

Try It Yourself

CSS Syntax

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

Attribute Value

Value Description
auto Default Value. The item will span one column.
span n Specifies the number of columns the item will span across.
column-line Specifies the column where the display of items stops.

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.gridColumnEnd="5"

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