CSS grid-column Property

Definition and Usage

The grid-column property is a shorthand that places a grid item horizontally by setting grid-column-start and grid-column-end.

Use line numbers, named lines, or span. One value often sets the start (and may imply a named area end). Two values use a slash: start / end. The property is not inherited. The initial value for each longhand is auto. For both axes in one declaration, see grid-area.

CSS Syntax

Common forms: 1 / 3, span 2, and 2 / -1 (from line 2 to the last line).

Property Values

Lines are numbered from 1. A 3-column grid has column lines 1–4. Negative numbers count backward from the end.

How to Use grid-column

Build a grid with columns, then place an item on those column lines.

1. Set display: grid and define columns with grid-template-columns.
2. On the item, set grid-column to start / end or span n.
3. Use grid-row when you also need vertical placement.
4. Prefer longhands when you only change the start or only the end.

Live Preview

A three-column grid. Only the highlighted item’s grid-column changes.

CSS Examples

Each snippet focuses on grid-column. Use Try It Yourself for a live editor.

<style>
  section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .box {
    grid-column: 1 / 3;
  }
</style>

<section>
  <div class="box">Wide</div>
  <div>2</div>
  <div>3</div>
</section>

<style>
  section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .box {
    grid-column: span 2;
  }
</style>

<section>
  <div class="box">Span</div>
  <div>2</div>
  <div>3</div>
</section>

<style>
  section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .box {
    grid-column: 1 / -1;
  }
</style>

<section>
  <div class="box">Full</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

Key Takeaways