CSS grid-column-endProperty
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| grid-column-end | 57 | 16 | 52 | 10 | 44 |
Property definition and usage instructions
The grid-column-end property defines how many columns a grid element spans, or on which column it ends.
| Default Value: | auto |
|---|---|
| Inherited: | no |
| animation: | Supported.Read Aboutanimatable Try it Yourself |
| version: | CSS Grid Layout Module Level 1 |
| JavaScript Syntax: | object.style.gridColumnEnd="5" Try it Yourself |
Syntax
grid-column-end: auto|span n|column-line;
| Value | Description |
|---|---|
| auto | Default value; the grid element spans one column. |
| span n | Specifies the number of columns the grid element will span. |
| column-line | Specifies on which column the grid element starts to be displayed. |
Example
Sets the grid element to end at the third column:
.item1 {
grid-column-end: span 3;
}
Try it Yourself »
Related Articles
CSS Tutorial:CSS Grid Layout
CSS Reference Manual:grid-columnProperty
CSS Reference Manual:grid-column-startProperty
CSS Reference Manual:grid-row-startProperty
CSS Reference Manual:grid-row-endProperty
other extensions