Why doesn't min-content work with auto-fill or auto-fit?

The second rule doesn't work because min-content is an intrinsic sizing function.

§ 7.2.2.1. Syntax of repeat()

  • Automatic repetitions (auto-fill or auto-fit) cannot be combined with intrinsic or flexible sizes.

§ 11. Grid Sizing

  • An intrinsic sizing function (min-content, max-content, auto, fit-content()).

  • A flexible sizing function [is a dimension with the fr unit].


I've worked around this by doing

grid-template-columns: repeat(auto-fill, minmax(0, max-content));

This ensures that the grid tracks are created with a minimum size that is not "intrinsic" whilst allowing the tracks to expand to fit based on the max-content. I use auto-fit instead of auto-fill sometimes depending on use case, but both should work.