CSS propertyGrid
grid-column
Sets which grid columns an item starts and ends in.
- Initial value
auto- Inherited
- No
- Animatable
- no
- Applies to
- grid items and absolutely positioned elements inside a grid container
- JavaScript
element.style.gridColumn = "1 / 3"
Example
#CSS
.article {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.article .hero {
grid-column: 1 / -1;
}Example HTML
<div class="article stage">
<div class="box hero">Banner spanning the full width</div>
<div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div>
</div>Preview
Definition and usage
#The grid-column property is a shorthand for grid-column-start and grid-column-end. Grid lines are numbered starting at 1, and 1 / 3 means: start at line 1, end at line 3, so take up the first two columns.
Instead of an end line, you can give a span: span 2 means two columns from wherever the item would land. Negative numbers count from the end, so 1 / -1 stretches an item across the full width of the grid.
An item with an explicit position is placed first, and the remaining items fill in the free spaces around it.
Syntax
#Syntax
grid-column: <start> [ / <end> ]?;Values
#Values in practice
#auto
The item takes up one column in an automatically chosen spot.
.target { grid-column: auto; }span 2
The item spans two columns.
.target { grid-column: span 2; }2 / 4
From line 2 to line 4, meaning the second and third columns.
.target { grid-column: 2 / 4; }1 / -1
From the first line to the last: the full width of the grid.
.target { grid-column: 1 / -1; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#grid-column: 1 / -1is the simplest way to get an item across the full width of the grid, no matter how many columns there are.spanis more convenient than line numbers when you don’t care which column the item starts in.
Related entries
#Spotted a mistake or missing an example? Write to us.