CSS fr/小数单位最小值太大

Question

我有一个jsfiddle .

我拥有的:

我想要什么:

问题:

希望相关的部分是:

  grid-template-columns: repeat(auto-fit, 1fr);

我的部分中的两个元素都有 width: max-content;。

这个(以及扩展但技术上相同的repeat(auto-fit, minmax(auto, 1fr));)没有达到我的期望 - 它创建了图片1，我期望它如图 2 所示。看起来这些元素的最小宽度太大，因此它不是将它们放在一行上，而是将它们放在列中。

我通过将代码更改为 repeat(auto-fit, minmax(200px, 1fr)); 制作了图 2。这不是一个很好的解决方案，因为我希望最小元素大小基于网格元素的宽度，而不是某个任意值。

我确实希望元素能够位于不同的行上(例如，如果浏览器非常窄)，因此 CSS 网格对于此任务似乎很有用。我显然只是误解了一些关键方面。

问题

我可以在grid-template-columns中使用什么值来使我的元素按照我期望的CSS网格方式工作？有没有办法用 repeat(auto-fit, X); 来做到这一点，还是我必须指定数字？

回答

如下所述，您不能将 repeat(auto-fit 与 fr 一起使用，因为它没有指定绝对最小值或最大值，规范认为这是无效的。Michael_B 给出了使用的答案(在他的 jdfiddle 示例评论中)

  display: flex;
  flex-wrap: wrap;

它完全符合我的预期repeat(auto-fit, 1fr); 要做的事情。

Answer 1

这条规则不起作用。

grid-template-columns: repeat(auto-fit, 1fr)

问题解释如下:minmax fails (invalid property value)

<小时/>

这条规则不起作用:

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))

问题解释如下:minmax() defaulting to max