Почему min-content не работает с автозаполнением или автоподгонкой?

Question

В принципе, я не понимаю, почему это работает:

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

Но это не работает:

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

Я действительно хочу сделать возможной последнюю функциональность. Есть ли другие способы заставить это работать?

Answer 1

Второе правило не работает, потому что min-content является внутренней функцией определения размера.

§ 7.2.2.1. Синтаксис repeat()

• Автоматические повторы (auto-fill или же auto-fit) нельзя комбинировать с собственными или гибкими размерами.

§ 11. Размер сетки

• Внутренняя функция определения размера (min-content, max-content, auto, fit-content()).

Answer 2

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.