css - 在 CSS Grid 中，为什么 1FR+9FR 在小屏幕尺寸中的行为与 10FR 不同？

Question

所以我在 CSS Grid 中定义了一个布局，它需要这个特定的行具有相同大小的输入。我可以做数学运算，只指定百分比，它工作正常（见注释掉的行）但是当我通过小数单位（fr）指定它时，跨栏比非跨栏“挤压”更多。

.A {
  grid-area: a;
}

.B {
  grid-area: b;
}

.C {
  grid-area: c;
}

.Exchange_Row {
  display: grid;
  grid-template-columns: 1fr 9fr 10fr 10fr 1fr;
  /*
   grid-template-columns:  3% 27% 30% 30% 3%;
  */
  grid-template-areas: "a a b c ."
}

input[type=text] {
  border: solid;
}

<div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">
  <div id="currencyRow" class="Exchange_Row">
    <input type="text" class="A" value="A" />
    <input type="text" class="B" value="B" />
    <input type="text" class="C" value="C" />
  </div>
</div>

当我将其调整为窄视图（小于 598）时，A 继续变小（降至 127 像素），但 B 和 C 保持不变，为 169 像素。

如果我使用 fr 单位注释掉 grid-template-columns 行，而是使用下面的百分比，那么它可以正常工作。

以下是使用 fr 单位定义列时显示不同大小的屏幕截图（如上面的代码中所示）：

谁能帮我理解为什么会这样？我希望 A 停止在 169 像素，否则 B 和 C 会继续缩小到 127 像素，因为它们的定义几乎相同。

标签： csscss-grid

Answer 1

添加min-width:0到输入，您应该修复百分比值，以便它们与fr. 你有31fr所以1fr是关于100/31 = 3.225%

.A {
  grid-area: a;
}

.B {
  grid-area: b;
}

.C {
  grid-area: c;
}

.Exchange_Row {
  display: grid;
  grid-template-columns: 1fr 9fr 10fr 10fr 1fr;
  grid-template-areas: "a a b c ."
}
.Exchange_Row.percentage {
 grid-template-columns:  3.225% 29.03% 32.25% 32.25% 3.225%;
}

input[type=text] {
  border: solid;
  min-width:0;
}

<div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">
  <div id="currencyRow" class="Exchange_Row">
    <input type="text" class="A" value="A" />
    <input type="text" class="B" value="B" />
    <input type="text" class="C" value="C" />
  </div>
</div>
<div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">
  <div id="currencyRow" class="Exchange_Row percentage">
    <input type="text" class="A" value="A" />
    <input type="text" class="B" value="B" />
    <input type="text" class="C" value="C" />
  </div>
</div>

这与网格项的自动最小大小以及网格项的大小有关。输入元素的默认宽度由浏览器设置为最小尺寸（与flexbox相同）。此大小用于定义10fr.

如果我们参考上面的链接：

一旦放置了网格项目，就会计算网格轨道（行和列）的大小，考虑到它们的内容大小和/或网格定义中指定的可用空间。

两列（由 定义10fr）将根据它们的内容（输入元素）来调整大小，但前两列（1fr和9fr）不能使用输入来调整大小，因为这一列跨越它们，而不仅仅是其中一个。换一种说法：1frand9fr列没有任何明确的内容，因此它们将根据可用空间调整大小，然后输入将匹配该空间。

换句话说，第一个输入的大小基于1fr和，9fr但另一个输入的大小是10fr。

通过添加min-width:0，我们删除了自动最小大小约束，因此不再需要考虑内容大小，并且所有网格列都将使用可用空间调整大小，然后输入将匹配该大小。

添加width:100%也将解决问题，但不同。在这种情况下，我们根据其包含块（网格项）告诉输入具有其宽度，因此我们需要首先定义网格项的大小（考虑可用空间）然后解析百分比值以定义输入大小.

即使您更改了fr值，任何配置都会发生这种情况：

.A {
  grid-area: a;
}

.B {
  grid-area: b;
}

.C {
  grid-area: c;
}

.Exchange_Row {
  display: grid;
  grid-template-columns: 5fr 5fr 1fr 1fr 1fr;
  grid-template-areas: "a a b c ."
}
.Exchange_Row.another {
 grid-template-columns:  50fr 50fr 3fr 1fr 1fr;
}

input[type=text] {
  border: solid;
}

<div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">
  <div id="currencyRow" class="Exchange_Row">
    <input type="text" class="A" value="A" />
    <input type="text" class="B" value="B" />
    <input type="text" class="C" value="C" />
  </div>
</div>
<div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">
  <div id="currencyRow" class="Exchange_Row another">
    <input type="text" class="A" value="A" />
    <input type="text" class="B" value="B" />
    <input type="text" class="C" value="C" />
  </div>
</div>

即使我们为第一个输入定义了更大的值，另一个总是会获胜，因为他们将定义自己的网格列的大小，而第一个将简单地取其余的。

更新

解释这一点的另一种方法（正如@Michael_B 的评论）是1frunit 等价于minmax(auto,1fr)这意味着对于10fr列，我们auto将内容的大小作为下限，而前两列的情况并非如此，因为它们没有t 将输入作为其内容。

我们可以使用minmax(0,1fr)来克服这个问题，而不是使用min-width:0

.A {
  grid-area: a;
}

.B {
  grid-area: b;
}

.C {
  grid-area: c;
}

.Exchange_Row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,9fr) minmax(0,10fr) minmax(0,10fr) minmax(0,1fr);
  grid-template-areas: "a a b c ."
}
.Exchange_Row.percentage {
 grid-template-columns:  3.225% 29.03% 32.25% 32.25% 3.225%;
}

input[type=text] {
  border: solid;
}

<div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">
  <div id="currencyRow" class="Exchange_Row">
    <input type="text" class="A" value="A" />
    <input type="text" class="B" value="B" />
    <input type="text" class="C" value="C" />
  </div>
</div>
<div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">
  <div id="currencyRow" class="Exchange_Row percenage">
    <input type="text" class="A" value="A" />
    <input type="text" class="B" value="B" />
    <input type="text" class="C" value="C" />
  </div>
</div>