CSS grid-column Property: Place Grid Items Across Columns

A shorthand property for grid-column-start and grid-column-end. It defines an item's horizontal position and width within a grid in a single line.

Quick example

.feature-box {
  grid-column: 1 / 3;
}

.full-width {
  grid-column: 1 / -1;
} /* spans across all columns */

Syntax

grid-column: <grid-line> [/ <grid-line>]?

<integer>

Column line number. grid-column: 2 starts the item at column line 2.

<line-number> / <line-number>

Start and end lines separated by slash. grid-column: 1 / 4 spans from line 1 to line 4.

span <number>

Span across a number of column tracks. grid-column: span 2 covers two columns.

<line-number> / span <number>

Start at a line, span some tracks. grid-column: 2 / span 2 starts at line 2 and covers two columns.

1 / -1

Common pattern: spans the full width of the grid. -1 is the last column line regardless of grid size.

<name>

Named grid line defined in grid-template-columns. grid-column: main-start / main-end uses explicit names.

auto

Default. Auto-placement decides where the item sits.

Quick facts

Initial value

See individual properties

Inherited

Applies to

Grid items and boxes within grid containers

Animation type

discrete

Examples

Full-width row across the grid

.hero {
  grid-column: 1 / -1;
}

Spans from the first column line to the last. Works regardless of how many columns the grid has, so your layout stays flexible.

Span multiple columns

.feature-card {
  grid-column: span 2;
}

Takes up two columns wherever auto-placement puts it. No need to specify the starting line.

Exact start and end

.sidebar {
  grid-column: 1 / 2;
}

.main {
  grid-column: 2 / 5;
}

Sidebar occupies column 1 only. Main occupies columns 2 through 4 (line 2 to line 5 spans three columns).

grid-column Browser Support

Widely available Since 2017 95% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2017.

Safe to use without fallbacks.

View on caniuse.com → View on MDN → View on webstatus.dev → Learn more about Baseline →

57+

52+

10.1+

16+

Common pitfalls

Line numbers count edges, not columns

In a 4-column grid, there are 5 column lines. grid-column: 1 / 3 spans two columns (from line 1 to line 3), not three. This off-by-one is the most common grid error.

grid-column: 1 / -1 only works with explicit columns

Negative line numbers count from the end of the explicit grid (defined in grid-template-columns). In an implicit grid created by auto-flow, -1 may not point where you expect. Use an explicit grid-template-columns if you rely on -1.

A span that exceeds available columns wraps or creates tracks

grid-column: span 5 in a 3-column grid either makes the item start on a new row where 5 tracks fit (which may still fall short), or creates implicit column tracks. Behavior depends on grid-auto-flow. Verify by testing how the grid grows when content exceeds expected size.