为什么最小含量不能与自动填充或自动调整一起使用？

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()

     

  
• 自动重复（auto-fill或auto-fit）不能合并   尺寸为固有或灵活。
  

     

§ 11. Grid Sizing

     

  

• 内部大小调整函数（min-content，max-content，auto，   fit-content()。

  

• 灵活的大小调整功能[is a dimension with the fr unit]。

  

Answer 2

我已经通过这样做解决了这个问题

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

这可确保创建的网格轨道的最小长度不是“固有的”，同时允许轨道根据max-content进行扩展以适合。有时会根据用例使用auto-fit而不是auto-fill，但是两者都可以使用。