Items flow into the grid
When you do not pin grid items to specific lines, the auto placement algorithm drops them into cells one by one. It walks the grid in the direction set by grid auto flow, filling the next empty slot that fits each item.
- The default flow is row, filling left to right then down.
- Setting flow to column fills top to bottom then across.
- Items that span multiple tracks need a run of empty cells.
Sparse versus dense packing
By default placement is sparse: the cursor only moves forward and never backtracks, so a wide item can leave gaps behind it. Adding the dense keyword lets the algorithm backfill earlier holes with later smaller items.
- Sparse keeps the visual order matching source order.
- Dense fills holes but can reorder items visually.
- Implicit tracks are created when items overflow the explicit grid.
The grid auto rows and columns properties size any tracks the algorithm generates automatically.
Key idea
Auto placement fills empty cells in the flow direction, and the dense keyword backfills gaps at the cost of visual order matching the source.