在CSS Grid中,为什么1FR + 9FR在小屏幕尺寸下的表现与10FR相同？

Question

所以我在CSS Grid中定义了一个布局,需要这个特定的行具有相同大小的输入.我可以做数学并且只指定百分比并且它工作正常(参见注释掉的行)但是当我通过小数单位(fr)指定它时,跨越的列"squishes"比非跨越的列更多.

.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继续变小(低至127px)但B和C保持相同,为169px.

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

以下屏幕截图显示了使用fr单位定义列时的不同大小(如上面的代码所示):

任何人都可以帮助我理解为什么会这样吗？我预计A会停在169px,否则B和C会继续收缩到127px,因为它们的定义几乎相同.

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）无法使用输入来调整大小，因为这一列跨越了这两列，而不仅仅是其中一列。换句话说：1fr和9fr列没有任何显式内容，因此它们将根据可用空间调整大小，然后输入将与该空间匹配。

换句话说，第一个输入的大小基于 和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 的评论）是，1fr单位相当于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>