如何在网格项之间添加垂直线？

Question

我目前在网格项之间添加垂直线时遇到一些麻烦。我当前的解决方案在线条之间有空白空间，并且无法使用边框，因为边框将直接“粘合”在项目上，而不是在两个项目的中间。

上面的代码目前看起来像这样：

但它应该看起来像这样：

#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>

Answer 1

您可以在背景下执行此操作，并且即使更改模板列也可以轻松调整：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background:linear-gradient(#000,#000) center/2px 100% no-repeat;
  grid-gap: 16px;
  margin:5px;
}

.grid-item {
  height: 20px;
  background-color: red;
  position: relative;
}


.grid-container.another {
  grid-template-columns: 2fr 1fr;
  background-position:66.5% 0;
}

.grid-container.column-3 {
  grid-template-columns: 1fr 1fr 1fr;
  background:
    linear-gradient(#000,#000) center/2px 100% no-repeat,
    linear-gradient(#000,#000) center/2px 100% no-repeat;
  background-position:33% 0, 67% 0;
}

<div class="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>

<div class="grid-container another">
  <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>

<div class="grid-container column-3">
  <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>