Layout
grid-column
grid-column goes on a grid item and sets which columns it sits in and how many columns it spans. It is a shorthand for grid-column-start and grid-column-end.
Syntax
<grid-line> [ / <grid-line> ]?Preview
Code
.box {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.box > :nth-child(2) {
grid-column: span 2;
}Controls
About
Values
Write the start line and the end line separated by / (grid-column: 1 / 3). Lines are the boundaries between columns, so a three-column grid has lines 1 to 4 from left to right. 1 / 3 runs from line 1 to line 3, covering the first and second columns. Write each line as one of these:
auto: the initial value. Items go into the free cells in order and are one column wide.- A line number:
3is line 3. Negative numbers count from the right (the end), and-1is the last line, so1 / -1stretches from edge to edge. There is no line 0. span 2: how many columns to span. Withspan 2alone and no start line, the item is still placed automatically, but two columns wide.
With a line number for the start and no end line, the end is auto and the item is one column wide. grid-column: 3 puts the item in a single cell in the third column.
The preview on this page sets display: grid and grid-template-columns: repeat(3, 1fr) as helper declarations, placing four items in three columns of cells, and puts grid-column on the second item only (.box > :nth-child(2) is a selector for the second child of the box). As the outlined item 2 widens or moves, items 3 and 4 behind it move too.
Cells before it can stay empty
When you place an item in a set column, as with 1 / -1 or 3, cells before it can stay empty. By default items are placed in order without going back (grid-auto-flow: row). With grid-auto-flow: row dense on the container, later items fill the empty cells.
How line numbers count
Negative numbers count from the right edge of the columns written in grid-template-columns (the explicit grid). They don't reach columns added automatically for extra items, so in a box without written columns 1 / -1 does not stretch from edge to edge. On the other hand, a number beyond the written columns (such as 5 in a three-column grid) adds columns automatically, with widths from grid-auto-columns.
Not covered on this page
Line names set like grid-template-columns: [full-start] 1fr [full-end] (as in grid-column: full) are not covered by the controls on this page yet, but you can type them into the code. grid-row sets the row, and grid-area sets rows and columns together.