css网格没有正确调整列的大小
css网格没有正确调整列的大小
提问于 2020-09-01 18:13:22
就在我开始理解这些东西的时候.我遇到css无法正确调整网格列大小的问题。下面的片段演示了这个问题。网格共有12列。第一行应该是4，2，2，2，2= 12，第二行应该是3，3，3，3= 12。
第二行列都应该是相同的宽度，但是css呈现前两列，使文本以"I1234“结尾，而第二列以"K1234”结尾，因此它们显然是不相等的。有趣的是，如果我去掉第一行，它们的尺寸是正确的。
我正在为Chrome开发这个应用程序，但同样的问题也发生在Firefox上。
我做错了什么？谢谢-乔恩
.test-grid {
display: grid;
gap: 5px;
grid-template-areas:
"a a a a b b c c d d e e"
"f f f g g g h h h i i i";
}
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
.e { grid-area: e; }
.f { grid-area: f; }
.g { grid-area: g; }
.h { grid-area: h; }
.i { grid-area: i; }
input {
width: 100%;
}
<div class="test-grid">
<div class="a"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
<div class="b"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
<div class="c"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
<div class="d"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
<div class="e"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
<div class="f"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
<div class="g"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
<div class="h"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
<div class="i"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-01 21:25:05
CSS网格列/行不是相互独立的，行之间会自然地相互影响。
在第一行中有5个网格项，在第二行中有4个网格项，因此浏览器将尝试将它们均平，并且由于您没有告诉它如何使用，所以它将推迟到auto。
网格项之间要共享的剩余空间在两行之间将有所不同，这就是网格项不相等的原因。
计算如下:容器宽度为1200px，内容(在本例中为输入)宽度为143px
143 * 5 = 715px乘以有多少输入，得到初始width1200 - 715 = 485px减去容器宽度中的初始宽度，使之超出space485 / 12 = 40.416666666666664px，除以12所需的列计数
。
此时，列宽度是基于5 input initial width定义的，第二行只有4，第二行不能更改，它只会跟随它，浏览器将尝试容纳它，因此宽度不均匀。
解决方案
使用grid-auto-columns: 1fr;均匀调整网格项的大小，或更明确地显示列grid-template-columns:repeat(12,1fr);
.test-grid {
display: grid;
grid-gap: 5px;
grid-auto-columns: 1fr;
grid-template-areas: "a a a a b b c c d d e e" "f f f g g g h h h i i i";
}
.test-grid>div {
height: 100px;
overflow:hidden; /* small screen sake, not needed */
}
.a {
grid-area: a;
background: red;
}
.b {
grid-area: b;
background: yellow;
}
.c {
grid-area: c;
background: black;
}
.d {
grid-area: d;
background: brown;
}
.e {
grid-area: e;
background: indigo;
}
.f {
grid-area: f;
background: pink;
}
.g {
grid-area: g;
background: green;
}
.h {
grid-area: h;
background: blue;
}
.i {
grid-area: i;
background: orange;
}<div class="test-grid">
<div class="a"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
<div class="b"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
<div class="c"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
<div class="d"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
<div class="e"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
<div class="f"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
<div class="g"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
<div class="h"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
<div class="i"><input type="text" value="A1234 B1234 C1234 D1234 E1234 F1234 G1234 H1234 I1234 J1234 K1234"></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63693251
复制相关文章
相似问题
腾讯云开发者
