Question

.parent{
display:grid;
grid-template-columns:50% 50%;
grid-gap:5px;
width:50%;
height:54px;
background:gold;
}

.left, .right{border:2px solid blue;}

<div class='parent'>
<div class='left'></div>
<div class='right'></div>
</div>

为什么右侧有白色垂直间隙，大约2个像素？

Answer 1

用百分比设置网格项目的宽度不会占用grid-gap，因此50％+ 5px + 50％超出了网格的宽度（100％）。

使用fr units而不是百分比来解决此问题：

.parent{
display:grid;
grid-template-columns: 1fr 1fr;
grid-gap:5px;
width:50%;
height:54px;
background:gold;
}

.left, .right{
    border: 1px solid blue;
}

<div class='parent'>
    <div class='left'></div>
    <div class='right'></div>
</div>

Answer 2

这似乎与grid-gap属性有关。它在不扩展背景的情况下将子元素推向右侧。网格间隙为5像素，白色间隙占3像素，而2像素边界占其余间隙。

最简单的解决方案是将背景设置为子元素。我还没有足够的网格来了解任何特定于网格的解决方案。

显示网格-背景在右侧有白色缝隙

2 个答案: