grid-column

grid-column sets a grid item’s column start and end in one declaration. Columns run along the grid’s inline axis, which is horizontal in ordinary horizontal writing.

Two tracks between three lines

The item starts at line 2 and ends at line 4. It spans two tracks, not three: three columns have four boundary lines.

<div class="layout"><div class="feature">Lines 2 to 4</div></div>

.layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.feature {
  grid-column: 2 / 4;
}
.layout > * {
  padding: 0.5rem;
  background: #dbeafe;
}
.layout > .feature {
  background: #bfdbfe;
}

A note across the complete explicit grid

Line -1 is the end of the explicit column grid. This note spans all three columns, even if their sizes change.

<div class="layout">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <p class="feature">All three explicit columns</p>
</div>

.layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.feature {
  grid-column: 1 / -1;
}
.layout > * {
  padding: 0.5rem;
  background: #dbeafe;
}
.layout > .feature {
  background: #bfdbfe;
}

Values and shorthand behavior

Both longhands initially use auto and are not inherited. Use start/end lines, named lines, or a positive span. 2 / span 2 starts at line 2 and spans two tracks. span 2 alone requests a two-track automatic placement. Zero line numbers and nonpositive span counts are invalid.

With only a numeric start, the omitted end becomes auto. A single area name can provide both boundaries through its generated start/end line names. Negative numbers count back from the explicit grid’s end, not the end of all implicit tracks.

Why placement looks wrong

Set this on a grid item, with a grid container around it. Out-of-range line numbers can create implicit columns; -1 does not include those extra tracks. Named lines and named areas have distinct matching rules. Visual movement leaves reading and focus order unchanged.

Learn grid-template-columns, grid-column-end, and grid-area for the surrounding layout.

Sources and browser support

MDN: grid-column describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.

CSS Grid placement specification defines line matching and shorthand behavior.