CSS grid-column-end Property

Definition and Usage

The grid-column-end property sets a grid item’s ending column edge. You can use a line number, a named line, or span to stretch from the start edge.

It is a longhand of grid-column (with grid-column-start). Set it on the item, not the container. It is not inherited. The initial value is auto (default span of 1).

CSS Syntax

A grid line can be auto, a number such as 3, -1, a name, or span 2.

Property Values

Line 0 is invalid. On a 3-column grid, positive end lines run 1–4.

How to Use grid-column-end

Define columns on the container, then set where the item’s columns stop.

1. Set display: grid and grid-template-columns on the container.
2. Optionally set grid-column-start on the item.
3. Set grid-column-end to a line number, -1, or span n.
4. Use the shorthand grid-column when you set start and end together.

Live Preview

A three-column grid. The item starts at column line 1. Only grid-column-end changes.

CSS Examples

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

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

  .box {
    grid-column-start: 1;
    grid-column-end: 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-end: 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-start: 1;
    grid-column-end: -1;
  }
</style>

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

Key Takeaways