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

Question

Basically, I do not understand why this works:

.grid {
  display: grid;
  grid-template-columns: repeat(4, min-content);
}

But this doesn't work:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, min-content);
}

I really wish to make the latter functionality possible. Are there other ways to make it work?

Answer 1

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].