CSS Grid Auto Placement Demo

Auto-placement is the algorithm CSS Grid uses to position items that don't have explicit grid-column or grid-row values. Items flow automatically into available cells based on grid-auto-flow — by default row (left to right, top to bottom). This tool lets you see it in action.

Row flow (default): items fill each row left-to-right, then move to the next row. Column flow: items fill each column top-to-bottom, then move to the next column. Column flow is great for vertical layouts like timelines or masonry-like designs where vertical order matters more than horizontal.

Dense packing tells the browser to back-fill any gaps. If a spanned item leaves an empty cell earlier in the grid, smaller subsequent items can jump back to fill that hole. Without dense, items only move forward, potentially leaving visible gaps. Use dense when you want a tight, gap-free layout — but be aware it can reorder items visually.

Use dense when you have items of varying sizes (via grid-column: span or grid-row: span) and want to avoid wasted whitespace. Common in image galleries, card layouts, and dashboard widgets. Caution: dense packing can disrupt the visual order — items may appear out of their DOM sequence, which can be confusing for screen readers.

Items with explicit grid-column / grid-row are placed first, locking their positions. The auto-placement algorithm then fills remaining cells around them. In this demo, "spanned items" use grid-column: span 2 (row flow) or grid-row: span 2 (column flow), acting as semi-explicit placements that influence how other items flow.

Implicit tracks are rows or columns created automatically when items overflow the explicitly defined grid. grid-auto-rows and grid-auto-columns control their size. In row flow, extra rows are implicit; in column flow, extra columns are implicit. This demo sets grid-auto-rows: 70px (row flow) or grid-auto-columns: 90px (column flow).

Yes! Named grid areas work alongside auto-placement. Items assigned to named areas are placed first; remaining items auto-flow into unoccupied cells. This hybrid approach is powerful for page layouts — use areas for header/footer/sidebar, and let content items auto-fill the main region.

CSS Grid (including grid-auto-flow and dense) is supported in all modern browsers since 2017: Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+. It's safe for production use. For IE11, a fallback layout is recommended (flexbox or floats). Global support exceeds 97%.

The gap (or grid-gap) property adds space between tracks but does not affect the auto-placement algorithm's cell-counting logic. Gaps are purely visual spacing. This demo uses a 6px gap — small enough to keep the grid tight while clearly separating cells.