grid
grid-column
Shorthand for grid-column-start and grid-column-end, controlling how many columns a grid item spans. Accepts line numbers, named lines, or span keywords.
grid-column: <start> / <end> (e.g. 1 / 3 | span 2 | 2 / -1)Common values
| Value | Effect |
|---|---|
| 1 / -1 | Spans from first to last column line |
| span 2 | Item covers two columns from its auto position |
| 2 / 4 | Starts at line 2, ends at line 4 |
| auto | Default; auto-placed by grid |
Examples
.hero { grid-column: 1 / -1; }Full-width row inside a grid
.wide { grid-column: span 2; }Card takes two column tracks
.sidebar { grid-column: 1; grid-row: 1 / span 3; }Sidebar in column one spanning three rows
Gotcha
Negative line numbers count from the end of the explicit grid only; implicit tracks are not reachable that way.
Related properties
grid-area
Places a grid item into a named template area or into a specific span of rows and columns. It is the shorthand for grid-row-start / grid-column-start / grid-row-end / grid-column-end.
grid-template-columns
Defines the number, size, and naming of columns in a grid container. Supports flexible fr units, repeat(), minmax(), and auto-fit/auto-fill for responsive layouts.
gap
Shorthand for row-gap and column-gap, setting spacing between flex, grid, or multi-column items. Replaces margin hacks for evenly spacing children.
display
Sets whether an element is treated as a block or inline box and defines the layout used for its children. It is the single most important property for controlling how boxes participate in the flow.