Understanding Auto-Placement and grid-auto-flow

In CSS Grid, the auto-placement algorithm determines how grid items are automatically positioned when you do not explicitly assign their location. This process is controlled by the grid-auto-flow property, which governs whether items are placed by rows or columns, and whether the browser should try to fill empty spaces more densely. By default, grid items are placed in row-major order: each item fills the next available cell in the current row before moving to the next row. The grid-auto-flow property can be set to row, column, or dense, each affecting the layout in distinct ways.

Key points:

• The auto-placement algorithm handles item positioning unless you specify a location;
• The grid-auto-flow property controls whether items are placed by row or by column;
• Use the dense keyword to enable tighter packing by filling gaps left by explicit placements or larger items;
• Default behavior is row order, filling each row before moving to the next;
• Changing grid-auto-flow changes how your grid adapts to content and item order.

Note

Switch between grid-auto-flow: row, grid-auto-flow: column, and grid-auto-flow: row dense affect the placement of grid items A–E when one item (C) is explicitly positioned. The arrangement and packing of items will change based on the selected flow mode.

Auto-Placement and Explicitly Positioned Items

When you explicitly place some items on the grid using properties like grid-column or grid-row, the auto-placement algorithm skips those cells and continues placing the remaining items in the next available slots. This means that explicitly positioned items can create gaps in the grid, and auto-placed items will fill only the unoccupied cells, following the order and rules defined by grid-auto-flow. If you use the dense keyword, the browser will attempt to backfill gaps left by explicitly placed or larger items, packing the grid more tightly.

Tips for Dynamic Layouts with Auto-Placement

To take full advantage of auto-placement in dynamic or content-driven layouts:

• Use grid-auto-flow: row for traditional, row-by-row population of the grid;
• Switch to grid-auto-flow: column when you want items to fill columns before rows;
• Add dense to either mode if you want the browser to fill in smaller gaps left by explicitly placed or larger items;
• Combine explicit placement for special items with auto-placement for the rest, allowing for both control and flexibility;
• Test your layout with different content orders and amounts to ensure your grid adapts as expected.