CSS fr /分数单位最小值太大 [英] CSS fr / fractional units minimum too large

问题描述

我有一个

什么我想要：

问题：

希望相关的部分是：

 网格-template-columns：repeat（auto-fit，1fr）; 
  

其中，本节中的两个元素都具有 width：max-content; 。

此（以及 repeat（自动拟合，minmax（auto，1fr））的扩展但技术上相同的形式） ; ）不执行我期望的操作-它创建图片1，我希望它看起来像图片2。看起来这些元素的最小宽度太大，所以不要放在一行上，它将它们放在列中。

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

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

问题

什么值可以在 grid-template-columns 中使用以使元素按我对CSS网格的期望的方式工作吗？有没有一种方法可以使用 repeat（auto-fit，X）; 或我必须指定数字？

答案

如下所述，您不能使用 repeat（auto-fit with fr ，因为它没有指定绝对的最小值或最大值，但规范指出这是无效的。
Michael_B给出了使用

  display：flex; $ b的答案（在他的jdfiddle示例注释中）。 $ b flex-wrap：wrap; 
  

这完全符合我的预期 repeat （自动调整，1fr）； 。

解决方案

此规则无效。

 网格模板列：repeat（auto-fit，1fr）
  

问题在这里得到解释： minmax失败（无效的属性值）

---

此规则不起作用：

 网格模板列：repeat（auto-fit，minmax（200px，1fr））
  

Th在此处说明了一个问题：默认为maxmax（）的maxmax（a）

I have a jsfiddle.

What I have:

What I want:

Problem:

The hopefully relevant section is:

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

where both elements in my section have width: max-content;.

This (and the expanded but technically identical form of repeat(auto-fit, minmax(auto, 1fr));) do not do what I expect - it creates picture 1, I expect it to look like picture 2. It looks like the minimum width for these elements is too large, so instead of being on one row, it puts them in columns.

I made picture 2 by changing the code to repeat(auto-fit, minmax(200px, 1fr));. This is not a great solution as I want the minimum element size to be based on the grid elements' widths, not some arbitrary value.

I do want to have the elements able to be on different rows (for instance, if the browser is very narrow), so CSS grid seems useful for this task. I'm obviously just misunderstanding some key aspect.

Question

What value can I use in my grid-template-columns to make my elements work the way I expect with CSS grid? Is there a way to do it with repeat(auto-fit, X); or do I have to specify the number?

Answer

As stated below, you cannot use repeat(auto-fit with fr as it does not specify an absolute minimum or maximum, which the spec says is invalid. Michael_B gave the answer (in his jdfiddle example comment) of using

  display: flex;
  flex-wrap: wrap;

which does exactly what I expected repeat(auto-fit, 1fr); to do.

解决方案

This rule won't work.

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

The problem is explained here: minmax fails (invalid property value)

---

This rule won't work:

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

The problem is explained here: minmax() defaulting to max

这篇关于CSS fr /分数单位最小值太大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！