是否可以在网格项目之间添加线？

Question

我目前在在网格项目之间添加垂直线有些麻烦。我当前的解决方案是在行与行之间留有空格，我不能使用边框，因为边框会直接“粘”在项目上，而不是在两个项目的中间。

<html>
<head>
    <style>
        #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
        }
    </style>
</head>
<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>
    </div>
</body>

当前上面的代码如下：

但是它应该看起来像这样：

Answer 1

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

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>

是否可以在网格项目之间添加线？

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

1个回答

最新问题

是否可以在网格项目之间添加线？

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

1个回答

最新问题

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