grid-column
A shorthand property for 'grid-column-start' and 'grid-column-end'. It defines an item's horizontal position and width within a grid in a single line.
It is documented as part of the CSS Grid Layout specification.
Syntax
/* Usage Example */
.feature-box {
/* Starts at line 1 and ends at line 3 */
grid-column: 1 / 3;
}
.full-width{
/* Spans across all available columns */
grid-column: 1 / -1;
}
/* Global values */
grid-column: inherit;
grid-column: initial;
grid-column: revert;
grid-column: revert-layer;
grid-column: unset;
grid-column Browser support
Widely available
Since
2017 95% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2017.
57+
52+
10.1+
16+