Implicit Grid and Grid-Auto-Flow

The explicit grid is defined by grid-template-columns and grid-template-rows. When items overflow beyond these defined tracks, the browser creates implicit tracks automatically.

Defines the size of implicitly created row tracks. Without it, implicit rows are sized to fit their content (auto).

Make implicit rows at least a certain height but expandable:

Defines implicit column track sizes when items are placed outside the explicit column range:

Controls how the auto-placement algorithm places items:

• row (default) — place in rows, adding new rows as needed
• column — place in columns, adding new columns
• row dense — fill gaps aggressively by backtracking
• column dense — dense filling in column direction

dense makes the algorithm attempt to fill holes left by large-spanning items. This can cause items to appear out-of-order.

Horizontal scrolling card strip where columns grow as needed:

A photo gallery with mixed sizes that fills gaps:

Named areas only apply to the explicit grid. Items placed in the implicit grid cannot use named area placement directly — they require line-number or span placement.

In Chrome DevTools, the layout overlay shows both explicit (solid) and implicit (dashed) grid lines. This helps you understand where auto-placed items land.

Items spanning multiple rows in the implicit grid need grid-auto-rows to size correctly. Without it, implicit rows size to content which can create uneven layouts.

The implicit grid extends the explicit grid with auto-created tracks. grid-auto-rows/columns controls their size; minmax() makes them flexible. grid-auto-flow directs placement direction. dense packing fills gaps aggressively — useful for masonry-style layouts but may break visual order.