Placing items: grid-column / grid-row + span

Direct placement on the grid

By default, items flow into cells row-by-row (left to right). You can override:

.featured {
  grid-column: 1 / 3;       /* spans columns 1 to 3 (2 columns wide) */
  grid-row: 1 / 3;          /* spans rows 1 to 3 (2 rows tall) */
}

The grid lines are numbered starting from 1 (the left/top edge). A 3-column grid has 4 vertical grid lines (1, 2, 3, 4).

span shorthand

.featured {
  grid-column: span 2;       /* spans 2 columns starting from wherever auto-placement puts it */
  grid-row: span 3;          /* spans 3 rows */
}

span N is "this item is N tracks wide/tall, place it wherever fits next."

Negative numbers and -1

.full-width-footer {
  grid-column: 1 / -1;      /* from line 1 to the LAST line — full row, no matter how many columns */
}

-1 is the last line in the grid. Useful for "always full-width" rows.

Common pattern: feature row + sub-grid

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.hero { grid-column: 1 / -1; }              /* full-width hero */
.featured { grid-column: 1 / 3; grid-row: span 2; }   /* 2-col 2-row featured tile */

The remaining items auto-flow into the empty cells.