A grid defines columns and rows, but nothing forces an item to occupy a single cell: a featured image can perfectly well stretch across two columns, or a sidebar span the full available height. That is exactly what grid-column and grid-row let you do, by stating between which grid lines each item starts and ends.
Unlike grid-template-areas, which names zones, these two properties are set directly on the child being positioned, using grid line numbers instead of names.
Definition
grid-column and grid-row place an item on a CSS Grid grid by stating between which vertical or horizontal lines it should span. Grid lines are numbered starting at 1, before the first column or row, not from 0. These two properties are shorthands for grid-column-start / grid-column-end and grid-row-start / grid-row-end, which are rarely used separately in practice.
The start / end syntax
.wide-card {
grid-column: 1 / 3;
}
.narrow-card {
grid-column: 3 / 4;
}
.full-column {
grid-column: 1 / -1;
}grid-column: 1 / 3 places an item between grid line 1 and grid line 3, which makes it span two columns. The number -1 always refers to the last line of the grid, no matter how many columns are defined: grid-column: 1 / -1 therefore makes an item span the full width, a trick commonly used for a header or footer inside a grid that otherwise has several columns.
| Syntax | Effect |
|---|---|
grid-column: 2 | Occupies a single cell, the one starting at line 2 |
grid-column: 1 / 3 | Spans from line 1 to line 3, so two columns |
grid-column: span 2 | Spans two columns from the current position |
grid-column: 1 / -1 | Occupies the full width of the grid, no matter its column count |
The span keyword, a handy alternative
Instead of calculating the end line, span simply states how many columns or rows to span starting from the item's position. grid-column: span 2 is often easier to write than manually working out where the end line falls, especially in a grid whose column count can change with screen size.
grid-row follows exactly the same rules as grid-column, with its own horizontal lines instead of vertical ones. grid-row: 2 / 4 or grid-row: span 2 work identically, which saves you from learning a separate syntax for the vertical axis. Nothing stops two items from sharing the same grid zone either, overlapping partially or fully: the grid never blocks an overlap, it simply positions each item according to the lines given.
A classic trap: confusing a grid line with a column
The numbers used in grid-column do not count columns, they count grid lines, the vertical dividers between columns. A grid with three columns has four grid lines: one before the first column, one between each pair of columns, and one after the last.
Frequently asked questions
span keyword in the same declaration?Yes, it is actually the most common usage: grid-column: 2 / span 2 places the item starting at line 2 and stretches it across two columns, without having to calculate the exact end line. This combination avoids calculation mistakes while keeping a precise starting point.
grid-column goes beyond the grid's column count?The grid automatically creates extra implicit columns to hold the overflow, with a default width that may not match what you intended. This is a frequent source of broken layouts, worth watching for when a responsive grid changes its column count inside a Media query.
grid-row even if you do not want to change an item's height?No, grid-row is optional. Without it, an item occupies a single row, the one it gets in the grid's natural placement order. You only add it to deliberately make an item span several rows, for example an image that needs to cover the height of two rows of text.