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.
- Automatic repetitions (
auto-fill
orauto-fit
) cannot be combined with intrinsic or flexible sizes.
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.