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

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

  ）。

• 灵活的尺寸调整功能[是带有

  fr

  单位的尺寸]。

Answer 2

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

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

这可确保创建的网格轨道具有非“固有”的最小尺寸，同时允许轨道根据

max-content

扩展以适应。有时根据用例，我使用

auto-fit

而不是

auto-fill

，但两者都应该有效。

Answer 3

在这种情况下，我认为

flex

可能更适合，因为它在放置项目时确实考虑了元素的固有大小。类似的问题：

grid-template-columns: repeat(auto-fill, minmax(256px, max-content))

您的意思是您的项目可能会缩小到宽度 256px。在大多数情况下，尤其是动态内容，您不知道最长的标题、单词或元素有多长。这就是 Flexbox 的用途。

但是，我也希望情况并非如此。我的用例是我试图在同一行的标题和一些按钮之间留出空间。乍一看，这应该可以通过子网格来实现，它允许子项目的对齐来影响其他项目。我花了一天的大部分时间试图让它达到当一栏换行时，其余栏目换行的位置。我确实使用上面的

grid-template-columns

得到了部分解决方案，但不幸的是你不能使用自动列的内在属性。这使得太长的标题可能会被切断。 Flexbox 是正确的解决方案，它可能也适合您。