计算有多少fr'；s是CSS网格布局中的n个像素

我在这里问是因为我数学不好

假设网格大小为1920px，我没有使用显式大小调整

有多少个fr，即1200像素？我怎么计算呢

.grid {
  display: grid;
  grid-template-columns: 1fr 3.3335fr 1fr;
}

说明书上说：

该算法查找fr单元可以不使用的最大大小 超过目标大小。必须使用一组网格轨迹调用它 以及一些要填充的空间

• 让剩余空间为要填充的空间减去 非柔性网格轨道
• 让弹性系数总和为弹性轨道弹性系数之和。如果此值小于1，则将其改为1
• 假设fr大小为剩余空间除以弹性因子和
• 如果假设的fr大小和柔性轨迹的弹性系数的乘积小于轨迹的基本大小，则重新启动此算法，将所有此类轨迹视为不灵活
• 返回假设的fr大小

他们的意思是“假设的fr尺寸”将适用于机组（1fr）？我想是的

1920/(1+3.3335+1) = 359.988750352 <-- The hypothetical fr size
359.988750352 * 3.3335 = 1200.0224993

这是一个标题
这是一篇文章的主体

边栏
页脚

您有一个网格容器，沿X轴或Y轴有1200px的可用空间（无所谓）

如果容器有一个网格轨迹设置为

1fr

，则该列/行将消耗所有1200px

如果您有

网格模板列：1fr 1fr

，则每个列将获得相等的可用空间分布。因此，每列的宽度为600px，与此类似：

grid-template-columns: 600px 600px

---

在您的情况下，它的工作原理如下：

根据规范：

必须使用一组网格轨迹和一些要填充的空间来调用它

您使用以下规则调用了栅格轨迹：

grid-template-columns: 1fr 3.3335fr 1fr

您要填充的空间是1200像素

---

让剩余空间为要填充的空间减去非柔性栅格轨迹的基本尺寸

同样，要填充的空间（“剩余空间”）是1200px

没有非柔性栅格轨迹。这就像一列设置为200px：

grid-template-columns: 1fr 3.3335fr 200px 1fr

fr算法将减去200px轨迹。剩余空间可供fr使用

---

让弹性系数总和为弹性轨道弹性系数之和

这意味着我们将

fr

值相加：

1 + 3.3335 + 1 = 5.3335

弹性系数总和为5.3335

---

假设fr大小为剩余空间除以弹性因子和

1200px/5.3335fr=225px

---

现在我们知道每个

fr

单元代表225px

• 1fr

  =225px

• 2fr

  =450px

• 3fr

  =675px
• 等等

这意味着：

 grid-template-columns: 1fr 3.3335fr 1fr

 grid-template-columns: (1fr x 360px) (3.3335fr x 360px) (1fr x 360px)

相当于：

 grid-template-columns: (1fr x 225px) (3.3335fr x 225px) (1fr x 225px)

其结果是：

 grid-template-columns: 225px 750.0375px 225px

 grid-template-columns: 360px 1200px 360px

---

但是，需要注意的是，

fr

单元并不用于设置栅格轨迹的特定长度。它的工作是在容器中分配可用空间（类似于flexbox的

flex grow

）。所以你的问题似乎有点理论性和不切实际。如果容器的大小被稍微调整，或者混合中加入了一个不灵活的轨迹，那么上面所有的像素计算都会被忽略

---

更新（基于评论）

有一个小错误。我的网格大小是1920像素而不是1200像素。。。但这是一个极不寻常的例子。我希望3.3335fr与1200px相关，而不是所有轨道的总和。。。3.3335fr为~1200px，在一个1920px宽的网格中有两个相邻的1fr列

如果网格容器的宽度为1920px，那么假设的fr大小为360px

这意味着：

 grid-template-columns: 1fr 3.3335fr 1fr

 grid-template-columns: (1fr x 360px) (3.3335fr x 360px) (1fr x 360px)

其结果是：

 grid-template-columns: 225px 750.0375px 225px

 grid-template-columns: 360px 1200px 360px

---

你开始说你没有使用显式大小，然后问如何获得显式大小。。。否则，这只是数学。359.988750352*y=1200，求解y。y=1200/359.988750352。我会让你在计算器上打这个。我这样说是因为我没有使用显式大小（你在撒谎）。我问如何从公式中获得像素的fr等价，这是另一回事。359.988750352值取决于剩余空间/弹性因子和。但这个值只是因为我在一些曲目中使用了1fr。。。如果不是，则必须转换。所以我问是否有更直接/更恰当的方式获得它。嘿@Michael_B我编辑了这篇文章并发布了一个实例。既然我已经解决了我的问题，我就不会提出新的问题。再次感谢！有个错误。我的网格大小是

1920px

而不是

1200px

。。。但这是一个极不寻常的例子。我希望

3.3335fr

是

1200px

，而不是所有曲目的总和。问题是，通过这种方式，我们应该继续手动尝试fr值，直到接近幻数（

1200px

）的等价性

3.3335fr

是

~1200px

，在宽度为

1920px

的网格中有两个相邻的

1fr

列。我不同意Calc被丢弃的说法。。。我知道如果我使用非柔性长度和柔性长度混合，我必须计算剩余空间减去非柔性长度。一切都会好起来的。这是正确的。如果没有四舍五入小数，它将是1920/（1+3.3335+1）=359.988750352。也许，另一种选择是根据规范使用

minmax（min，max）

函数（）

max

使用

flex

长度，它应该是

fr

。因此，理论上，我们可以使用html{font size:10px；}做一些类似于

网格模板列：1fr minmax（auto，120rem）1fr

。如果我没有错，这会让sec