CSS grid-column-start Property

Definition and Usage

The grid-column-start property sets where a grid item begins horizontally. You pick a column line number, a span, a named line, or auto.

It works on grid items inside a display: grid container. Pair it with grid-column-end, or use the grid-column shorthand for both edges.

CSS Syntax

The initial value is auto. Integers may be negative to count from the end of the explicit grid.

Property Values

How to Use grid-column-start

Create columns, then tell one item which line to start on.

1. Build a grid with display: grid and grid-template-columns.
2. Remember lines: three columns create lines 1, 2, 3, and 4.
3. Set grid-column-start on the item (a line number or span).
4. Optionally set grid-column-end, or use grid-column shorthand.

Live Preview

Three equal columns. Change only grid-column-start on the highlighted item.

CSS Examples

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

<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }
  .item {
    grid-column-start: 2;
  }
</style>

<div class="grid">
  <div class="item">Item</div>
  <div>A</div><div>B</div>
</div>

<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }
  .item {
    grid-column-start: span 2;
  }
</style>

<div class="grid">
  <div class="item">Wide</div>
  <div>A</div>
</div>

<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }
  .item {
    grid-column-start: -2;
  }
</style>

<div class="grid">
  <div>A</div><div>B</div>
  <div class="item">End</div>
</div>

Key Takeaways