grid-column
Which columns a grid item occupies.
Syntax
grid-column: start / end;Values
| Parameter | Type | Description |
|---|---|---|
| start / end | lines | Line numbers: `1 / 3` covers columns one and two. |
| span n | keyword | Spans n columns from wherever the item lands. |
| 1 / -1 | lines | From the first line to the last — the full width. |
Examples
A full-width item and an item over two columns:
<style>
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.grid div { padding: 8px; background: lightskyblue; }
</style>
<div class="grid">
<div style="grid-column: 1 / -1;">1 / -1 — the full width</div>
<div style="grid-column: span 2;">span 2</div>
<div>1</div>
</div>Notes
Lines are numbered from 1, negative numbers count from the end. Columns have one more line than there are columns.
See also
- grid-row — Which rows a grid item occupies.
- grid-area — Places a grid item into a named area or between given lines.
- grid-template-columns — The number and widths of the columns of a grid.
In the tutorial
- Grid lines and areas — How to put an item in the right place of a grid — line numbers, grid-column and grid-row, span, named areas with grid-template-areas.