在CSS Grid中，为什么小屏幕尺寸的1FR + 9FR与10FR的不一样? [英] In CSS Grid why is 1FR+9FR not behaving the same as 10FR in small screen sizes?

问题描述

因此，我在CSS Grid中定义了一个布局，需要该特定行具有相同大小的输入.我可以进行数学运算，只需指定百分比即可，并且可以正常工作(请参见注释行)，但是当我通过小数单位(fr)指定它时，跨栏比非跨栏挤"得更多.

So I am defining a layout in CSS Grid which needs this particular row to have identically sized inputs. I can do the math and just specify percentages and it works fine (see commented out line) but when I specify it via the fractional unit (fr) then the spanned column "squishes" more than the non-spanned columns.

.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.

When I resize this to a narrow view (narrower than 598) then A continues to get smaller (down to 127px) but B and C stay the same at 169px.

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

If I comment out the grid-template-columns line using fr units and instead use the percentages below then it works fine.

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

Here are screenshots showing the different sizes when the columns are defined using fr units (as in the code above):

有人可以帮助我了解为什么会这样吗?我希望A停在169px，否则B和C会继续缩小到127px，因为它们的定义几乎相同.

Can anybody help me understand why this is happening? I expected A to stop at 169px or else B and C to continue to shrink down to 127px since they are all defined almost identically.

推荐答案

在输入中添加min-width:0，您应该确定百分比值，使其与fr完全相同.您有31fr，所以1fr大约是100/31 = 3.225%

Add min-width:0 to input and you should fix the percentage value so they are exacltly the same as the fr. You have 31fr so 1fr is about 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的列大小.

This is related to Automatic Minimum Size of Grid Items and how grid items are sized. An input element has a default width set by browser considered as a minimum size (it's also the same with flexbox). This size is used to define the column size of the 10fr.

如果我们引用以上链接:

If we refer to the above links:

放置网格项目后，将计算网格轨迹(行和列)的大小，并考虑它们的内容大小和/或网格定义.

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

Both columns (defined by 10fr) will be sized considering their content (the input element) but the first two columns (1fr and 9fr) cannot be sized using the input because this one is spaning both of them and not only one of them. To say this differently: the 1fr and 9fr columns don't have any explicit content thus they will be sized according to the available space then the input will match this space.

换句话说，第一个输入是根据1fr和9fr确定大小的，而另一个输入是确定10fr大小的.

In other words, the first input is sized based on the 1fr and 9fr but the other input is sizing the 10fr.

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

By adding min-width:0 we remove the Automatic Minimum size constraint thus there is no more content size to account for and all the grid columns will get sized using the available space then the inputs will match that size.

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

Adding width:100% will also fix the issue but differently. In this case, we tell the input to have its width based on its containing block (the grid item) so we need to first define the size of the grid item (considering the available space) then resolve the percentage value to define the input size.

即使您更改了fr值，这种情况在任何配置下都将发生:

This will happen with any configuration even if you change the fr values:

.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>

即使我们为第一个输入定义了更大的值，另一个也将始终获胜，因为它们将定义自己的网格列的大小，而第一个将简单地取走其余的列.

Even if we define bigger value for the first input, the other will always win because they will define the size of their own grid column and the first one will simply take the remaining.

更新

解释此问题的另一种方法(如@Michael_B的评论)是1fr单位等效于 minmax(auto,1fr) ，这意味着对于10fr列，我们将内容的auto大小作为下限，对于前两个列，情况并非如此，因为它们没有输入作为内容.

Another way to explain this (as comment by @Michael_B) is that 1fr unit is equivalent to minmax(auto,1fr) which means that for the 10fr column we have the auto size of the content as a lower bound which isn't the case for the two first columns since they don't have the input as their content.

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

We can use minmax(0,1fr) to overcome this instead of using 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>

这篇关于在CSS Grid中，为什么小屏幕尺寸的1FR + 9FR与10FR的不一样?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！