小编Jan*_*öck的帖子
如何在网格项之间添加垂直线？
我目前在网格项之间添加垂直线时遇到一些麻烦。我当前的解决方案在线条之间有空白空间，并且无法使用边框，因为边框将直接“粘合”在项目上，而不是在两个项目的中间。
上面的代码目前看起来像这样：
但它应该看起来像这样：
#grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 16px;
}
.grid-item {
height: 20px;
background-color: red;
position: relative;
}
.grid-item::after {
content: "";
position: absolute;
height: 100%;
width: 2px;
background: grey;
right: -9px
}<div id="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>7
推荐指数
推荐指数
1
解决办法
解决办法
8969
查看次数
查看次数