Use grid-column to place a grid item between vertical grid lines. Its two values specify the starting and ending lines, such as grid-column: 3 / 4. CSS Grid numbers lines from 1, not 0, and grid-column is shorthand for grid-column-start and grid-column-end. section 4.2.1
.item {
grid-column: 3 / 4; #1
grid-row: 2 / 3; #2
}
This listing places an item in the space between vertical lines 3 and 4 and horizontal lines 2 and 3. section 4.2.1
To span several columns, choose a wider line range or use span: grid-column: 2 / 4 covers the space between lines 2 and 4, while grid-column: 1 / span 3 covers three columns. section 4.2.1 section 4.2.3
Negative line numbers keep placement relative to the grid’s end:
- grid-column: 1 / -1 spans from the first line to the last, so a title or footer covers every column even when the column count changes. section 4.2.3
- Use the browser’s grid overlay and line-number display to verify which lines bound an item. section 4.2.1
A responsive title row
A title that must remain full width can use .title-row { grid-column: 1 / -1; }. The same placement works whether the grid has three columns or a different number. section 4.2.3
Placement can also create implicit tracks: assigning a column such as grid-column: 5 in a three-column layout places the item outside the explicit grid, prompting Grid to account for an additional track. section 4.3
