Why auto-fit or auto-fill not working properly with minmax?

Question

It doesn\'t work properly when I add auto-fit or auto-fill instead of a number.

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


        

Answer 1

At least one of the two arguments in a minmax() function must be a fixed length (e.g., px, em, %).

This rule is detailed in the Grid spec. See section "The syntax of a track list".

That's why your code (copied below) is not working.

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

---

In solving the problem I thought this other Grid rule would come in handy:

minmax(min, max)

Defines a size range greater than or equal to min and less than or equal to max.

If max < min, then max is ignored and minmax(min,max) is treated as min.

Looking at that last line, if max is less than min, then min prevails.

Looking at the first rule, at least one argument must be a fixed length.

So then this should work:

grid-template-columns: repeat(auto-fit, minmax(min-content, 1px));

It actually does fix the problem... but it also breaks the auto-fit wrapping feature (demo).

Nothing else I tried seemed to work. Maybe somebody else can find a solution. Or maybe this is a limitation in the current iteration of Grid.