Place Items by Grid Line

Use boundaries and spans to control where an item begins and ends.

Lines surround tracks

Four columns have five column lines. Three rows have four row lines.

Column 1 / 4
Column 4
Rows 1 / span 2
Auto
Auto
Column 2 / span 2

Read the shorthands

grid-column: 1 / 4 starts at line 1 and stops at line 4. grid-row: 1 / span 2 begins at row line 1 and covers two row tracks.

Explicit placement changes the visual layout. Keep the HTML source order meaningful without it.

Important HTML

Items occupy cells in the grid container.

<div class="grid-stage">
  <div class="cell span-wide">…</div>
</div>

Important CSS

Line-based placement spans tracks.

.span-wide {
  grid-column: 1 / 4;
  grid-row: 1 / span 2;
}