Place grid items

Place an item between grid lines:

.featured {
  grid-column: 1 / 3;
  grid-row: 1;
}

Or express the span directly:

.featured {
  grid-column: span 2;
}

Grid lines start at 1. Negative numbers count backward from the end, so grid-column: 1 / -1 spans all explicit columns.

Named lines make placement more resilient than unexplained numbers in a large layout:

.layout {
  grid-template-columns:
    [sidebar-start] minmax(12rem, 1fr)
    [content-start] minmax(0, 3fr) [content-end];
}

Items without placement continue through auto-placement. Keep HTML in logical reading order, especially when placed items overlap or appear in a different visual position.

Avoid grid-auto-flow: dense when its visual backfilling would make reading or keyboard order confusing. CSS placement changes appearance, not DOM order.

Grid can deliberately layer items in the same cell. Control painting carefully, preserve contrast, and make sure overlapping interactive controls do not cover one another.

Turn on line numbers in DevTools and place one item with numbers, one with a span, and one with named lines. Then tab through the page to compare keyboard order with visual placement.