提问人：Qimat Luo 提问时间：11/13/2023 最后编辑：Paulie_DQimat Luo 更新时间：11/13/2023 访问量：26
为什么CSS网格间隙会影响fr单位？
Why CSS grid gap affects fr unit?
问：
准备
<div class="g">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
</div>
.g {
display: grid;
grid-template-areas:
"a e"
"b e"
"c e"
"d f";
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 1fr 1fr 3fr;
}
.g > div:nth-of-type(1) {grid-area: a; background: red;}
.g > div:nth-of-type(2) {grid-area: b; background: orange;}
.g > div:nth-of-type(3) {grid-area: c; background: yellow;}
.g > div:nth-of-type(4) {grid-area: d; background: green;}
.g > div:nth-of-type(5) {grid-area: e; background: blue;}
.g > div:nth-of-type(6) {grid-area: f; background: purple;}
https://jsfiddle.net/ghbz9osy/
截面 e（蓝色）和 f（紫色）的高度相同，这是预期的。
问题
https://jsfiddle.net/ghbz9osy/1/
如果我添加它，它的高度将不一样。gap: 10px
问题
据我所知，gap 应该可以与 *fr 一起使用。
为什么当我添加间隙会打破它时？
注意
目前我的解决方案是将 a、b、c 部分包装到另一个网格中。
但是我想知道为什么上面的版本不起作用。
答：
1赞
tacoshy
11/13/2023
#1
分数占用剩余空间（网格容器和间隙填充后的空间）。因此，从不计算差距。如果一个元素跨越多个行或列，它也必须跨越与它的间隙。
您可以做的是让紫色元素跨越 3 行：
.g {
display: grid;
grid-template-areas:
"a e"
"b e"
"c e"
"d f"
"d f"
"d f";
grid-template-columns: 1fr 2fr;
grid-auto-rows: 1fr;
gap: 0.5em;
}
.g > div:nth-of-type(1) {grid-area: a; background: red;}
.g > div:nth-of-type(2) {grid-area: b; background: orange;}
.g > div:nth-of-type(3) {grid-area: c; background: yellow;}
.g > div:nth-of-type(4) {grid-area: d; background: green;}
.g > div:nth-of-type(5) {grid-area: e; background: blue;}
.g > div:nth-of-type(6) {grid-area: f; background: purple;}<div class="g">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
</div>上一个：如何让这些网格项对齐？
评论