css - 为什么 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. 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].