CSS grid-column attribute


example

set up "item1" In the first 1 Column start , In the first 5 End before column :

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

Give it a try »

Browser support

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

attribute
grid-column 57 16 52 10 44

Attribute definition and instructions

grid-column Attributes define the start and end positions of grid element columns .

be careful : grid-column yes grid-column-start and grid-column-end Short for property .

We can refer to the line number to set the grid element , You can also use keywords "span" To define the number of columns that the element will span .

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


Grammar

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

Worth Describe
grid-column-start Specifies which column to display grid elements from .
grid-column-end Specifies the column from which grid elements end , Or set to span several columns .

example

The following example sets "item1" stride across 3 column :

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

Give it a try »

The following example sets "item2" stride across 3 column :

example

.item2 { grid-column: 2 / span 3 ; }

Give it a try »

Related articles

CSS course : CSS Grid layout