CSS Grid auto fit with max-content

I had a similar question when playing around with grid:

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

If we take a look at the documentation we can see that minmax command is valid:

But in a repeat documentation on csswg, it states one simple rule that disallows all of this from happening;

The generic form of the repeat() syntax is, approximately,

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

The first argument specifies the number of repetitions. The second
argument is a track list, which is repeated that number of times.

However, there are some restrictions:

  • The repeat() notation can’t be nested.

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

Whats an intrinsic or flexible sizes ?

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

So the command wont work in grid because each column/row will be different sizes and wrapping cannot take place. See bellow picture as example.

minmax max-content auto-fit

This behavior should be executed using flex-box instead.

Leave a Comment