.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个像素)?
用百分比设置网格项目的宽度不会解决grid-gap
,因此50%+ 5px + 50%超出了网格的宽度(100%)。
使用fr
单位而不是百分比来解决此问题:
.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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句