所以我在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;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)
当我将其调整为窄视图(窄于598)时,A继续变小(低至127px)但B和C保持相同,为169px.
如果我使用fr单位注释掉grid-template-columns行,而是使用下面的百分比,那么它可以正常工作.
以下屏幕截图显示了使用fr单位定义列时的不同大小(如上面的代码所示):
任何人都可以帮助我理解为什么会这样吗?我预计A会停在169px,否则B和C会继续收缩到127px,因为它们的定义几乎相同.