CSS Grid minmax(auto, 1fr) with auto-fill/auto-fit track sizing configuration

Answer first

Do not ship repeat(auto-fill, minmax(auto, 1fr)) for consistent Chrome, Firefox and Safari widths. There is no reliable @supports feature query to detect how a browser resolves auto as the minimum in minmax(), and the pattern is not a stable responsive baseline.

Pragmatic cross-browser pattern that preserves auto-fill/auto-fit behavior:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
  /* or with a design min: repeat(auto-fit, minmax(220px, 1fr)); */
  gap: 1rem;
}

If you need columns to shrink below content size, use minmax(0, 1fr) with item-level overflow control, not auto.

Confirmed facts

• auto-fill creates as many tracks as fit in the container, keeping empty tracks. auto-fit collapses empty tracks to zero width. This behavior is spec-defined and consistent.
• minmax(<min>, <max>) with auto as the minimum is syntactically valid in all modern engines.
• @supports cannot distinguish how an engine interprets auto inside minmax(). Both minmax(auto, 1fr) and minmax(min-content, 1fr) are valid, so a feature query cannot branch on interpretation.

Likely explanation, not confirmed spec text

In practice, auto as a min in minmax() is resolved against the track’s intrinsic size. Engines have historically differed on whether that intrinsic size is treated closer to min-content or max-content for the minimum, which is why you see overflow or wasted space with variable item content.

That is why minmax(auto, 1fr) feels ambiguous: the minimum is content-dependent, so a long unbreakable word or a wide image can force a track wider than intended in one engine while another clamps it.

Steps for this case

1. Replace auto as the minimum with an explicit intrinsic keyword or a fixed length.
   • Stable intrinsic: repeat(auto-fit, minmax(min-content, 1fr))
   • Design-controlled: repeat(auto-fit, minmax(220px, 1fr))
2. Choose auto-fit for collapsing empty columns, auto-fill when you want placeholder tracks.
3. Add item overflow guards if you use a zero minimum:

   .grid > * { min-width: 0; overflow-wrap: anywhere; }

One diagnostic detail that changes the recommendation: what is the dominant content inside the grid items? If items contain long unbreakable strings or intrinsic-width media, min-content is safer than 0. If items are fully flexible text, minmax(0,1fr) with wrapping gives the most even distribution.