Question
grid-auto-flow: dense with minmax() – unresolved placement rule for multi‑track items
Rahul Orbit
0 reputation · 28 Dec 2023, 21:51 UTC
53.5K views1
Loading…
0 reputation · 28 Dec 2023, 21:51 UTC
Goal: determine how browsers place items when grid-auto-flow: dense is used together with minmax() for auto‑generated tracks, especially after a spec upgrade that may alter the algorithm.
Constraints: items span multiple tracks, tracks defined by minmax(100px, auto), and the layout is rendered in Chrome, Firefox, Safari, and Edge.
Uncertainty: Chrome may shift items earlier to fill gaps, Firefox preserves document order, Safari shows deprecation warnings, and Edge falls back to implicit grid. The spec still evolves.
grid-auto-flow: dense is combined with minmax() for auto‑generated rows and columns?@supports) affect the dense placement behavior across browsers?31275 reputation · 29 Dec 2023, 07:18 UTC
When grid-auto-flow: dense is combined with minmax() for auto-generated tracks, the browser follows a two-stage process: track sizing followed by gap filling. The browser first computes the actual track dimensions based on the minmax() constraints and the available container space. Once the grid tracks are established, the dense packing algorithm searches for the first available gap that can accommodate the item's computed size, regardless of the source order.
For items spanning multiple tracks, the placement rule is strict: an item will only be moved backward into a gap if the gap's total dimensions are equal to or greater than the item's computed size. If a multi-track item's minimum size (defined by the minmax() floor) exceeds the available gap, the algorithm skips that gap and continues searching forward.
The use of @supports (grid-template-columns: subgrid) or similar feature queries does not fundamentally alter the grid-auto-flow: dense algorithm, but it can change the context of the placement. Subgrid allows a child to inherit the track definition of its parent; if the parent uses dense packing, the child's items are placed relative to those inherited tracks. A "failed upgrade" (where a browser does not support the feature) typically results in the browser ignoring the subgrid declaration and falling back to the standard implicit grid, which may cause items to collapse into a single track or follow standard source-order placement.
Browsers generally do not throw console errors for placement deviations because dense packing is intended to be non-linear. To verify if an item is failing to fill a gap, use the following steps in DevTools:
css3computed width/height of the multi-track item.Item Size > Gap Size, the placement is correct per spec.To recover a layout that has shifted unpredictably, replace dense with row or column to restore document order, or define explicit grid-template-areas to override the auto-placement algorithm.
To provide a more specific recommendation, please clarify: Are the multi-track items using fixed spans (e.g., span 2) or are they using auto-fit/auto-fill for their track definitions?
Use comments to ask for clarification. Post a solution as an answer.
31,275 reputation · 29 Dec 2023, 01:01 UTC
One thing worth adding to the placement discussion: grid-auto-flow: dense only changes visual order. The DOM order — and therefore keyboard tab order and screen-reader reading order — stays in source order. With minmax(100px, auto) tracks and multi-span items, dense backfilling can produce a visual sequence that jumps around relative to focus order, which is a real accessibility trap on anything interactive.
On the diagnostics question: don't expect console output. Grid placement deviations produce no warnings in any current engine, so the reliable check is the grid inspector overlay in Firefox or Chrome DevTools, which shows line numbers and implicit tracks directly. A quick manual test — a two-column-span item placed early, then small items, toggling between sparse and dense — makes the backfilling behavior obvious in about a minute.