Auto-Flow Control Room

grid-auto-flow: row

The contrived trap: item 5 is tiny. A gap appears earlier because item 4 can’t fit. In row dense, Grid backfills that gap — so item 5 can appear above items 6–10.

Watch for visual reordering: dense packing can reduce gaps, but it may also make the layout order differ from DOM order.

Stage

DOM 1

span 2

DOM 2

span 2

DOM 3

span 3

DOM 4

span 2 (forces a gap behind)

DOM 5

tiny — jumps in dense

DOM 6

normal

DOM 7

normal

DOM 8

normal

DOM 9

normal

DOM 10

normal

With row, the gap stays empty. With row dense, item 5 backfills it.