网格列之间的分隔符

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

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

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

Answer 4

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

• 我的父网格类

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