CSS Grid - 为什么当 fr 单位小于 0.15 时会有剩余空间？

Question

在定义 CSS 网格布局时，我碰巧将网格行定义如下:

grid-template-rows: repeat(7, 0.14fr)

这导致了一些令人困惑的行为，网格拒绝完全分配剩余空间；相反，最后有一些剩余空间。

我尝试了同样的事情，但这次使用的是列:

grid-template-columns: repeat(7, 0.14fr)

这导致了相同的行为。接下来，我按如下方式更改值，将 0.14fr 增加到 0.15fr:

grid-template-rows: repeat(7, 0.15fr)

这让事情又好了。为了确保不是我这边的问题让事情变得奇怪，我在 Codepen 中设置了相同的情况:Weird CSS Grid - pen .

随着问题反复出现，我在 Chrome 上打开了 Codepen，看看它是否是特定于浏览器的:事实并非如此。同样的事情又发生了。我在下面附上了我一直在尝试做的事情的基本代码，fr 单位设置为 0.9fr，只是为了有所不同更清晰。

.box {
  display: grid;
  height: 80vh;
  width: 400px;
  margin-right: 50px;
  box-sizing: border-box;
  background-color: black;
  border: 1px solid red;

  /* ----------  Weird stuff starts here ---------- */

  /*   grid-template-columns: repeat(7, 0.15fr); */
  grid-template-rows: repeat(7, 0.09fr);

  /* ----------  Weird stuff ends here ---------- */

}

.box .temp:nth-child(even) {
  background-color: white;
}

.box .temp:nth-child(odd) {
  background-color: cornflowerblue;
}

<div class="box">
  <div class="temp temp--1"></div>
  <div class="temp temp--2"></div>
  <div class="temp temp--3"></div>
  <div class="temp temp--4"></div>
  <div class="temp temp--5"></div>
  <div class="temp temp--6"></div>
  <div class="temp temp--7"></div>
</div>

这是一个错误、特定于机器的问题、一个无辜的小怪癖、CSS-Grid 如何工作和计算 fr 单位还是特定于浏览器的问题？

Note:

1. My primary browser is Firefox, but I've tried replicating this in Chrome too.

2. Since the browser calculates the widths of the fr on-the-go, there might be a chance that this might be reproducible only on my machine. (I think? Not sure.)

3. This might be a fringe case, I agree. Why define fr units using smaller numbers like below when I can just use numbers bigger than 0.15, or 1, really? I only came across this problem (quirk?) when I just typed in the fractional values of a layout; I worked out the fr values by dividing the pixel lengths of the child elements by the pixel length of the parent container, which obviously works out to be lesser than 1.

4. I used CSS rather than SASS in the pen, since I thought maybe the SASS pre-processor might be doing something weird behind the scenes (far-fetched, I know, but I didn't want to take the chance.)

5. The breakpoint between 0.14fr and 0.15fr might be specific just to my machine.

Answer 1

定义repeat(7,0.14fr)时这意味着您将从网格中获取 7*0.14fr = 0.98fr .注意你是如何失踪的 0.02拥有 1这就是您缺少的空间。

定义repeat(7,0.15fr)时这意味着你将采取7*0.15fr = 1.05fr .在这种情况下，您覆盖了所有区域甚至更多，但没有更多。

来自 the specification :

Each column or row’s share of the leftover space can be computed as the column or row’s <flex> * <leftover space> / <sum of all flex factors>.

Note: If the sum of the flex factors is less than 1, they’ll take up only a corresponding fraction of the leftover space, rather than expanding to fill the entire thing. This is similar to how Flexbox [CSS-FLEXBOX-1] acts when the sum of the flex values is less than 1.

如果总和小于 1，则每个元素将占用相应的空间。在第一种情况下是 0.14fr ( 0.14* Height ) 并且当总和大于 1 时，我们应用公式，在这种情况下，无论您将在 repeat(7,x) 中使用什么值你将拥有:

(x/7*x) * Height = Height/7

基本上，您只需除以 7。

在您的情况下，您有两个范围:从 0至 1/7 = 0.1428..您将缺少空间的地方。然后上面1/7你不会的地方:

.box {
  display: inline-grid;
  vertical-align:top;
  height: 100px;
  width: 100px;
  box-sizing: border-box;
  background-color: black;
  border: 1px solid red;
  grid-template-rows: repeat(7, var(--x));


}

.box .temp:nth-child(even) {
  background-color: white;
}

.box .temp:nth-child(odd) {
  background-color: cornflowerblue;
}

<div class="box" style="--x:0.05fr">
  <div class="temp temp--1"></div>
  <div class="temp temp--2"></div>
  <div class="temp temp--3"></div>
  <div class="temp temp--4"></div>
  <div class="temp temp--5"></div>
  <div class="temp temp--6"></div>
  <div class="temp temp--7"></div>
</div>
<div class="box" style="--x:0.1fr">
  <div class="temp temp--1"></div>
  <div class="temp temp--2"></div>
  <div class="temp temp--3"></div>
  <div class="temp temp--4"></div>
  <div class="temp temp--5"></div>
  <div class="temp temp--6"></div>
  <div class="temp temp--7"></div>
</div>
<div class="box" style="--x:0.14fr">
  <div class="temp temp--1"></div>
  <div class="temp temp--2"></div>
  <div class="temp temp--3"></div>
  <div class="temp temp--4"></div>
  <div class="temp temp--5"></div>
  <div class="temp temp--6"></div>
  <div class="temp temp--7"></div>
</div>
<div class="box" style="--x:0.1429fr">
  <div class="temp temp--1"></div>
  <div class="temp temp--2"></div>
  <div class="temp temp--3"></div>
  <div class="temp temp--4"></div>
  <div class="temp temp--5"></div>
  <div class="temp temp--6"></div>
  <div class="temp temp--7"></div>
</div>

<div class="box" style="--x:10fr">
  <div class="temp temp--1"></div>
  <div class="temp temp--2"></div>
  <div class="temp temp--3"></div>
  <div class="temp temp--4"></div>
  <div class="temp temp--5"></div>
  <div class="temp temp--6"></div>
  <div class="temp temp--7"></div>
</div>

<div class="box" style="--x:100fr">
  <div class="temp temp--1"></div>
  <div class="temp temp--2"></div>
  <div class="temp temp--3"></div>
  <div class="temp temp--4"></div>
  <div class="temp temp--5"></div>
  <div class="temp temp--6"></div>
  <div class="temp temp--7"></div>
</div>