Jef*_*opo 4 css specifications css-grid
我在这里问是因为我数学很烂。
\n\n假设网格大小为 1920px，并且我没有使用显式大小调整。
\n\n即有多少个 fr's。1200 像素？我该如何计算它？
\n\n.grid {\n display: grid;\n grid-template-columns: 1fr 3.3335fr 1fr;\n}\n规范说：
\n\n\n \n\n\n\n该算法找到 fr 单元在不超过目标大小的情况下可以达到的最大大小。必须使用一组网格轨道\n和一些要填充的空间来调用它.
\n\n\n
\n- 让剩余空间 be the space to fill minus the base sizes of the\n non-flexible grid tracks.
\n- 让弹性因子求和 be the sum of the flex factors of the flexible tracks. If this value is less than 1, set it to 1 instead.
\n- 让假设的 fr 大小 be the leftover space divided by the flex factor sum.
\n- 如果假设的 fr 大小和灵活轨道\xe2\x80\x99s 弹性因子的乘积小于轨道\xe2\x80\x99s 基本大小，则重新启动此算法，将所有此类轨道视为不灵活。
\n- 返回假设的 fr 大小。
\n
他们的意思是“假设的 fr 大小”适用于单位 (1fr) ？大概吧
\n\n1920/(1+3.3335+1) = 359.988750352 <-- The hypothetical fr size\n359.988750352 * 3.3335 = 1200.0224993\n所以我想这是一种获取多少像素是 n fr 值的方法。
\n\n但是，如果我想做相反的事情，这将是计算 1200px 有多少 fr 的正确方法/正确公式？
\n\n更新：
\n\n这是我正在做的事情的一个活生生的例子。这minmax(min, max) helped me a lot. I\'ve solved some overflowing errors. And figured out how I can use rem units in grid template tracks but still benefit from shrinking :D
https://codepen.io/jeflopo/pen/OmZBEJ
\n\n.grid {\n display: grid;\n grid-template-columns: 1fr 3.3335fr 1fr;\n}\n1920/(1+3.3335+1) = 359.988750352 <-- The hypothetical fr size\n359.988750352 * 3.3335 = 1200.0224993\n您有一个网格容器，沿 X 或 Y 轴有 1200 像素的可用空间（无所谓）。
如果容器有一个网格轨道设置为1fr，则该列/行将消耗全部 1200 像素。
如果有grid-template-columns: 1fr 1fr，那么每列都会获得相等的可用空间分配。因此每列的宽度为 600px，类似于：
grid-template-columns: 600px 600px
就您而言，它的工作原理如下：
必须使用一组网格轨道和一定数量的要填充的空间来调用它。
您已使用以下规则调用网格轨道：
grid-template-columns: 1fr 3.3335fr 1fr
您要填充的空间是 1200 像素。
- 令剩余空间为要填充的空间减去非灵活网格轨道的基本尺寸。
同样，要填充的空间（“剩余空间”）为 1200 像素。
没有非柔性网格轨道。这就像设置为 200px 的列：
grid-template-columns: 1fr 3.3335fr 200px 1fr
fr 算法会减去 200px 的轨道。剩余的空间可供兄弟姐妹使用。
- 令弯曲因子总和为柔性轨道的弯曲因子之和。
这意味着我们将这些值相加fr：
1 + 3.3335 + 1 = 5.3335
弹性因子总和为 5.3335。
- 假设fr 大小为剩余空间除以弹性因子总和。
1200 像素 / 5.3335fr = 225 像素
现在我们知道每个fr单位代表225px。
1fr= 225 像素2fr= 450 像素3fr= 675 像素这意味着：
grid-template-columns: 1fr 3.3335fr 1fr
相当于：
grid-template-columns: (1fr x 225px) (3.3335fr x 225px) (1fr x 225px)
结果是：
grid-template-columns: 225px 750.0375px 225px
然而，值得注意的是，该fr装置并不打算为网格轨道设置特定的长度。它的工作是分配容器中的可用空间（类似于 flexbox 的flex-grow）。所以你的问题似乎有点理论化和不切实际。如果容器的大小发生了轻微的调整，或者将不灵活的轨道加入到混合中，则上面的所有像素计算都会被丢弃。
更新（根据评论）
有一个小错误。我的网格大小是 1920px 而不是 1200...但它是一个可推断的示例。我希望 3.3335fr 与 1200px 相关，而不是所有轨道的总和... 3.3335fr 约为 1200px，在宽度为 1920px 的网格中具有两个相邻的 1fr 列。
如果网格容器的宽度为 1920 像素，则假设的 fr 大小为 360 像素。
这意味着：
grid-template-columns: (1fr x 360px) (3.3335fr x 360px) (1fr x 360px)
结果是：
grid-template-columns: 360px 1200px 360px