Grid lines are numbered starting at 1 along each axis, so grid-column: 1 / 3 places an item starting at line 1 and ending at line 3, spanning across the two columns in between — the alternative span keyword, like grid-column: 2 / span 2, instead starts the item at a specific line and has it span a given number of columns forward from there, rather than requiring you to calculate and specify the exact ending line number directly. A single value, like grid-column: 2, without a slash, places the item in just that one specific column, spanning exactly one column track by default.
1Understanding Grid-column
Grid lines are numbered starting at 1 along each axis, so grid-column: 1 / 3 places an item starting at line 1 and ending at line 3, spanning across the two columns in between — the alternative span keyword, like grid-column: 2 / span 2, instead starts the item at a specific line and has it span a given number of columns forward from there, rather than requiring you to calculate and specify the exact ending line number directly. A single value, like grid-column: 2, without a slash, places the item in just that one specific column, spanning exactly one column track by default.
Use the span keyword, like grid-column: 1 / span 3, when you want an item to cover a specific number of columns starting from a given line, rather than manually calculating and specifying the exact numeric end line, which requires re-counting if the starting position ever changes.
.featured-item {
grid-column: 1 / 3;
}2Practical Example
Here is a real-world application of Grid-column showing how it is used in production CSS code.
.sidebar {
grid-column: 1 / span 1;
}
.main {
grid-column: 2 / span 2;
}3Best Practices
Follow these guidelines when working with Grid-column:
1. Use grid-column: start / span number when an item's span, how many columns wide it is, matters more than the exact specific ending line number
2. Number grid lines starting from 1, remembering an item spanning from line 1 to line 3 covers exactly 2 column tracks, the ones between those two lines, not 3
3. Combine grid-column with grid-row for full, explicit two-dimensional placement of a specific grid item into an exact rectangular region
Tip: Use the span keyword, like grid-column: 1 / span 3, when you want an item to cover a specific number of columns starting from a given line, rather than manually calculating and specifying the exact numeric end line, which requires re-counting if the starting position ever changes.
.featured-item {
grid-column: 1 / 3;
}