调整#wrap
的宽度(仅打开chrome开发工具)时,您会发现在某些尺寸上,右边框(用红色圆圈标记)会出现一些间隙。
男孩和女孩,请你帮我解决一下!
#wrap {
display: flex;
flex-direction: column;
width: 800px;
#header {
width: 100%;
box-sizing: border-box;
border: 1px solid black;
}
#grid {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-left: 1px solid black;
box-sizing: border-box;
}
span {
display: flex;
justify-content: center;
align-items: center;
height: 30px;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
}
<div id="wrap">
<div id="header">Header</div>
<div id="grid">
<span>Item</span>
<span>Item</span>
<span>Item</span>
<span>Item</span>
</div>
</div>