基本上，我不明白为什么会这样：
.grid {
display: grid;
grid-template-columns: repeat(4, min-content);
}
但这不起作用：
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, min-content);
}
我真的希望使后一种功能成为可能。还有其他方法可以让它发挥作用吗？
【问题讨论】：
标签： css css-grid fluid-layout css-multicolumn-layout
第二条规则不起作用，因为min-content 是一个内在的大小调整函数。
- 无法组合自动重复（
auto-fill或auto-fit） 具有固有或灵活尺寸。
内在的大小调整函数（
min-content、max-content、auto、fit-content())。灵活的大小调整功能 [is a dimension with the
frunit]。
【讨论】：
repeat 很重要，无论它是否是内在大小。归根结底，仍然会计算大小，那么为什么浏览器不能直接使用由固有大小调整功能计算得出的大小？
我已经解决了这个问题
grid-template-columns: repeat(auto-fill, minmax(0, max-content));
这可确保创建的网格轨道具有非“固有”的最小尺寸，同时允许轨道根据max-content 扩展以适应。我有时根据用例使用auto-fit 而不是auto-fill，但两者都应该工作。
【讨论】：