What is CSS Grid auto-placement and how does it work

Short answer

CSS Grid auto-placement automatically positions grid items into empty cells using an algorithm controlled by grid-auto-flow. By default it places items row by row, but you can switch to columns or enable dense packing to fill gaps.

Details

When you define a grid with grid-template-columns and grid-template-rows, any child elements that do not have an explicit grid-column or grid-row are placed by the auto-placement algorithm. The grid-auto-flow property accepts row, column, or dense. Setting grid-auto-flow: row dense tells the browser to backfill holes left by larger items, creating a more compact layout.

Implicit tracks are created automatically when auto-placed items exceed the explicit grid. You can size these with grid-auto-rows and grid-auto-columns. If you are building complex layouts, you might also want to learn how to create a responsive navigation bar with CSS Flexbox for the header area of your grid-based page.

Tips

• Use dense carefully; it can reorder visual appearance independently of source order, which may confuse screen readers.
• Combine auto-placement with minmax() to create responsive grids without media queries.
• For related layout techniques, see What is the CSS :has() selector and when to use it for powerful parent-selection logic that pairs well with grid layouts.