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

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>

Answer 2

您可以增加间隙量中的伪对象的高度，并在网格上设置overflow：hidden以隐藏最后一行的伪对象

#grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  overflow: hidden;
}

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

.grid-item::after {
  content: "";
  position: absolute;
  height: calc(100% + 16px);
  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 3

这里是解决方案代码笔，请参考此。

CodePen

#grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  position: relative;
}

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

.border {
  position: absolute;
  left: 50%;
  width: 2px;
  height: 100%;
  background: grey;
  right: -9px
}

<body>
  <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>
    <span class="border"></span>
  </div>
</body>

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

问题描述投票：1回答：3

3个回答

最新问题

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

问题描述 投票：1回答：3

3个回答

最新问题

问题描述投票：1回答：3