grid-column

Definition

The grid-column CSS property is a shorthand property that combines both grid-column-start and grid-column-end properties. It is used in grid layouts to specify the starting and ending positions of a grid item along the horizontal axis.

The grid-column property accepts values that represent the grid lines at which the grid item should start and end. Grid lines can be identified using line numbers, names of named grid lines, or the span keyword to span across multiple grid tracks.

Here’s an example:

.grid-item {
  grid-column: 2 / 4;
}

In this example, the grid-column: 2 / 4; rule sets the grid item to start at the second grid line and end at the fourth grid line horizontally. This means the grid item will span across two grid tracks.

The grid-column property provides a convenient way to specify both the starting and ending positions of a grid item along the horizontal axis. It simplifies the declaration of grid placement and allows for more concise grid layout code.

Syntax

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

Values

grid-column: <start> / <end> using line numbers, names, or span.

Practical Examples

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

Place items across column tracks with start/end lines.

HTML

Item A

Item B spans 2 columns

Item C

Code

<div class="grid gap-4 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm" style="display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:1rem;">
  <div class="rounded-lg bg-slate-100 p-3 text-sm text-slate-700">Item A</div>
  <div class="rounded-lg bg-slate-100 p-3 text-sm text-slate-700" style="grid-column:2 / span 2;">Item B spans 2 columns</div>
  <div class="rounded-lg bg-slate-100 p-3 text-sm text-slate-700">Item C</div>
</div>

Tips & Best Practices

Use named lines for maintainable templates.
Combine with grid-row for 2D placement.

Accessibility & UX Notes

Maintain logical DOM order even when items move visually.

Browser Support

Supported across modern browsers.

grid-column-start, grid-column-end
grid-row