html - 网格列之间的分隔符

Question

如何在网格列之间添加分隔符。我尝试添加边框，它总是破坏布局。请查看附图以清楚了解。

编辑

看看这里

http://burnfatweightlossblog.com/aiu/junaid/testhtml/

代码

<div class="container_12">
  <div id="footer">
    <div class="alpha grid_3 dabox"> </div>
    <!-- Box 1-->
    <div class="grid_3 dabox"> </div>
    <!-- Box 2-->
    <div class="grid_3 dabox"> </div>
    <!-- Box 3-->
    <div class="omega grid_3 dabox"> </div>
    <!-- Box 4--> 
  </div>
  <!-- footer--> 
</div>

Answer 1

在网格 div 内围绕您的内容放置一个包装器 div

HTML：

<div class="grid_4">
    <div class="columnDivider">
        contents here
    </div>
</div>

CSS：

.columnDivider {
    border-right: 1px solid #DEDEDE;
    margin-right:-10px; /* size of gutter */
    padding-right:10px; /* size of gutter */
}

Answer 2

添加边框会添加额外的 1px ，因此它会破坏布局，而不是向网格列添加边框，尝试在其中添加一个 div 并为其添加边框...

Answer 3

我有一个稍微不同的情况，我想添加的是仅在网格间隙中心位置的边框。*我想要的东西 并且只在一个网格组中

• 我的父网格类

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 50px; /*I Required this have a space between two grid columns*/ 
}

• 边境类

.grid-item{
  border-right: 1px solid #000000;
  padding-right: 25px;
}

• 列间隙修饰符

#divtoApply + .grid-container{
  column-gap: 25px;
}

• 示例 HTML 代码

<div>
   <div class="grid-container">
      <div>1 --> 1</div>
      <div>1 --> 2</div>
      <div>1 --> 3</div>
   </div>
   <div id="divtoApply" class="grid-container">
      <div class="grid-item">2 --> 1</div>
      <div class="grid-item">2 --> 2</div>
      <div>2 --> 3</div>
   </div>
</div>

Answer 4

正如 gtamil 所说，它将为每一列添加边框的宽度。因此，我看到的您的选择是：1）按照他说的做2）从具有1px边框的每列中删除1px 3）使用背景图像而不是实际边框

选项 3 通常是我的偏好，因为通常我希望分隔线的高度相同。我会在垂直重复的包装容器（而不是列 div）上有一个背景图像。如果您想使用此方法但分隔线的高度不相等，则可以将相同的图像添加到列中。