CSS Grid minmax(auto, 1fr) with auto-fill/auto-fit track sizing configuration
0 reputation · 15 Sept 2025, 08:25 UTC
Goal: Define a responsive grid column template using repeat(auto-fill, minmax(auto, 1fr)) that yields consistent track widths across Chrome, Firefox, and Safari.
Uncertainty: The CSS Grid specification leaves the intrinsic size represented by auto inside minmax() ambiguous, causing browsers to resolve it as either min‑content or max‑content. This divergence leads to unpredictable overflow or wasted space when the grid items vary in size.
Questions: Should authors treat auto in this context as min‑content and explicitly specify minmax(min-content, 1fr) for cross‑browser stability? Alternatively, is there a reliable fallback or feature‑query that can detect the browser’s interpretation and adjust the template accordingly? If the spec remains unresolved, what pragmatic pattern minimizes layout breakage while preserving the auto‑fill/auto‑fit behavior?