CSS grid-column-end attribute


set up "item1" stride across 3 column :

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

Give it a try »

Browser support

The number in the table indicates the first browser version number that supports this attribute .

grid-column-end 57 16 52 10 44

Attribute definition and instructions

grid-column-end Property defines how many columns the grid element spans , Or in which column .

Default value : auto
inherit : no
Animation : support . Read about animatable Give it a try
edition : CSS Grid layout module Level 1
JavaScript Grammar : object.style.gridColumnEnd="5" Give it a try


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

Worth Describe
auto Default value , Grid elements span a column .
span n Specifies the number of columns that the grid element will span .
column-line Specifies which column to start displaying grid elements from .


Set the grid element to end in the third column :

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

Give it a try »

Related articles

CSS course : CSS Grid layout

CSS Reference manual : grid-column attribute

CSS Reference manual : grid-column-start attribute

CSS Reference manual : grid-row-start attribute

CSS Reference manual : grid-row-end attribute