所以我在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;
}
当我将其调整为窄视图(窄于598)时,A继续变小(低至127px)但B和C保持相同,为169px.
如果我使用fr单位注释掉grid-template-columns行,而是使用下面的百分比,那么它可以正常工作.
以下屏幕截图显示了使用fr单位定义列时的不同大小(如上面的代码所示)：
任何人都可以帮助我理解为什么会这样吗？我预计A会停在169px,否则B和C会继续收缩到127px,因为它们的定义几乎相同.
最佳答案
添加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;
}
这与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,我们删除了自动最小大小约束,因此不再考虑内容大小,并且所有网格列将使用可用空间来调整大小,然后输入将匹配该大小.
添加宽度：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;
}
即使我们为第一个输入定义了更大的值,另一个总是会赢,因为他们将定义他们自己的网格列的大小,第一个将简单地取剩余的.
UPDATE
解释这一点的另一种方式(作为@Michael_B的评论)是1fr单位相当于minmax(auto,1fr),这意味着对于10fr列,我们将内容的自动大小作为下限,而不是两个第一列的情况因为他们没有输入作为他们的内容.
我们可以使用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,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;
}
