Item Placement

By default, grid items are auto-placed. But you can explicitly place any item on specific grid lines using grid-column and grid-row properties.

grid-columngrid-rowgrid-column-startgrid-column-endgrid-row-startgrid-row-end

1. grid-column-start & grid-column-end

Place an item by telling it where it starts and ends using column line numbers. Lines are numbered from 1 (left) to n+1 (right).

Live Demo

col 1–3

auto

CSS

.item-1 {
  grid-column-start: 1;
  grid-column-end:   3; /* occupies col lines 1→3 */
}
/* item spans from line 1 to line 3 = 2 columns wide */

2. grid-column Shorthand

The shorthand grid-column: start / end combines both properties. Use a slash to separate start from end.

Live Demo

1 / 3

3 / 5

auto

2 / 4

auto

CSS

.a { grid-column: 1 / 3; } /* line 1 to line 3 */
.b { grid-column: 3 / 5; } /* line 3 to line 5 */
.c { grid-column: 2 / 4; } /* line 2 to line 4 */

3. grid-row Placement

grid-row works exactly like grid-column but for rows. You can control both axes independently to place items anywhere in the grid.

Live Demo

row 1–3

col 2–4, row 1

2,2

3,2

full width row 3

CSS

.a {
  grid-column: 1;       grid-row: 1 / 3;
}
.b {
  grid-column: 2 / 4;   grid-row: 1;
}
.e {
  grid-column: 1 / 4;   grid-row: 3;
}

💡 Placed items can overlap! Use z-index to control which item appears on top when they overlap.

4. span Keyword

Instead of specifying the end line, use span N to say "this item should span N tracks". span 2 means "take up 2 columns/rows from wherever you start".

Live Demo

span 2

span 3

span 1

span 4 (full width)

CSS

.a { grid-column: span 2; } /* 2 columns wide */
.b { grid-column: span 2; } /* 2 columns wide */
.c { grid-column: span 3; } /* 3 columns wide */
.d { grid-column: span 4; } /* full width    */

/* equivalent: */
.a { grid-column: 1 / span 2; } /* start at 1, span 2 */

💡 span is relative — it starts wherever auto-placement puts the item. Combine with a start line for precise control: grid-column: 2 / span 3.

5. Negative Line Numbers

Negative line numbers count from the right (or bottom for rows). Line -1 is always the last line. This is great for placing items that should always span to the end.

Live Demo

1 / -1 (full width!)

1 / -2 (all but last col)

-2 / -1 (last col)

auto

2 / -1 (from 2 to end)

CSS

/* -1 = last line, -2 = second-to-last, etc. */

/* Span full width regardless of column count: */
.full  { grid-column: 1 / -1; }

/* Last column: */
.last  { grid-column: -2 / -1; }

/* From second to last: */
.rest  { grid-column: 2 / -1; }

💡 Negative lines only work on the explicit grid (tracks you define with grid-template-*). They don't work on implicitly created tracks.

6. Overlapping Items

Multiple items can occupy the same grid cells. They overlap like absolutely positioned elements. Use z-index to control stacking order.

Live Demo

Background item (1/3, 1/3)

Overlapping item (2/4, 1/3)