Grid Column Placement Property
Last updated: 2026-09-13
grid-column Grid Column Placement Property
grid-column is the shorthand for grid-column-start and grid-column-end. It positions a grid item along the horizontal direction. By specifying the start and end grid-line numbers, you control how many columns the item spans. It is a key property for building flexible grid layouts.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
grid-column: <grid-line> [ / <grid-line> ]?;⚙️ Values
| Value | Type | Description |
|---|---|---|
<grid-line> / <grid-line> | Value | Grid column placement |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-column | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： The span keyword specifies the number of tracks to cover: grid-column: span 2 spans two columns.
Tip： Grid lines are numbered from 1, with line 1 at the far left. Negative numbers count from the right, and -1 is the rightmost line.
❓ FAQ
QWhat is the difference between grid-column: 1 / 3 and 1 / span 2?
AIn most cases they produce the same result: 1 / 3 means from line 1 to line 3, while span 2 means starting at line 1 and covering two tracks. The difference shows when the grid structure changes: span counts tracks, so it stays robust, while a hard-coded end line can misalign when columns are added. Prefer span when the number of tracks to cover is known.
QCan grid items overlap?
AYes. Several grid items can be placed into the same grid area and overlap, with z-index controlling which one sits on top. This is the basis for magazine-style layouts, stacked labels and other layered effects. By default the auto-placement algorithm never overlaps items; overlap only happens when at least one item is explicitly positioned with the same grid lines, so treat it as an intentional feature. But overlapping hides content and blocks clicks, so verify that the content stays accessible and avoid accidental overlap in ordinary layouts.
QHow do I read grid-column: span 2 with only one value?
AWith a single value, the unspecified line defaults to auto and the browser’s auto-placement algorithm finds a position for the item, which then spans the given number of tracks. grid-column: span 2 means “place at the next available position and span two columns”, while grid-column: 1 / span 2 explicitly starts at line 1. The span form stays stable when the grid lines are renumbered.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Grid Row Placement
Positions a grid item vertically
Grid Area Shorthand
Shorthand that places an item on rows and columns at once
