CSS grid-columnProperty
Example
Set "item1" to start at column 1 and end before column 5:
.item1 {
grid-column: 1 / 5;
}
Try it Yourself »
Browser Support
The numbers in the table indicate the first browser version that supports the property.
| Property | |||||
|---|---|---|---|---|---|
| grid-column | 57 | 16 | 52 | 10 | 44 |
Attribute definition and usage instructions
The grid-column property defines the start and end positions of a grid item on the columns.
Note:grid-column is a shorthand property for the grid-column-start and grid-column-end properties.
We can set grid items by referring to line numbers, or use the keyword "span" to define how many columns the item will span.
| Default Value: | auto / auto |
|---|---|
| Inherited: | no |
| animation: | Supported.Read Aboutanimatable Try it Yourself |
| version: | CSS Grid Layout Module Level 1 |
| JavaScript Syntax: | object.style.gridColumn="2 / span 2" Try it Yourself |
Syntax
grid-column: grid-column-start / grid-column-end;
| Value | Description |
|---|---|
| grid-column-start | Specifies the column on which to start displaying the grid item. |
| grid-column-end | Specifies the column on which to end the grid item, or sets how many columns to span. |
Example
The following example sets "item1" to span 3 columns:
.item1 {
grid-column: 1 / span 3;
}
Try it Yourself »
The following example sets "item2" to span 3 columns:
Related Articles
CSS Tutorial:CSS Grid Layout
other extensions