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

Answer 2

我已经通过

解决了这个问题

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

这确保创建的网格轨道的最小尺寸不是 "intrinsic"，同时允许轨道根据 max-content 扩展以适合。我有时根据用例使用 auto-fit 而不是 auto-fill，但两者都应该有效。