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>

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

如果我使用 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>

这与 Automatic Minimum Size of Grid Items 有关以及如何grid items are sized .输入元素的默认宽度被浏览器设置为最小尺寸(与 flexbox 相同)。此大小用于定义 10fr 的列大小。

如果我们引用上面的链接:

Once the grid items have been placed, the sizes of the grid tracks (rows and columns) are calculated, accounting for the sizes of their contents and/or available space as specified in the grid definition.

两列(由 10fr 定义)的大小都将考虑其内容(输入元素)，但前两列(1fr 和 9fr) 不能使用输入来调整大小，因为这个跨越它们两个而不仅仅是其中一个。换句话说:1fr 和 9fr 列没有任何显式内容，因此它们将根据可用空间调整大小，然后输入将匹配该空间。

换句话说，第一个输入是根据1fr 和9fr 调整大小，但另一个输入是调整大小10fr。

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

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

即使您更改 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 大小作为下限，但前两列不是这种情况，因为它们没有输入作为它们的内容。

我们可以使用 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>