How do you manually position an element within a CSS Grid using grid lines?

You name the grid lines an item should span using grid-row-start/-end and grid-column-start/-end — or the grid-column / grid-row shorthands.

A grid's tracks are separated by numbered grid lines. To place an element deliberately (rather than letting it auto-flow), you say which line it starts on and which line it ends on. The element then spans all the cells in between.

header {
  grid-column-start: 1;
  grid-column-end: 5;   /* spans columns 1 through 4 */
  grid-row-start: 1;
  grid-row-end: 2;      /* occupies row 1 only */
}

/* The same thing, written with shorthands: */
header {
  grid-column: 1 / 5;   /* start / end */
  grid-row: 1 / 2;
}

The off-by-one trap: grid lines are numbered from 1, and the end value is exclusive. A 4-column grid therefore has 5 vertical lines (1-2-3-4-5), so spanning all four columns means grid-column: 1 / 5, not 1 / 4.

Go deeper:

• MDN — grid-template-columns — how tracks, the fr unit, repeat(), and the grid lines you place against are defined.