网格列之间的分隔符。

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>

- Rao

---

你尝试过填充吗？像这样一些代码'.col> {> padding-right：10px;> padding-left：50px;}如果我们有一些代码，表格或其他东西会更容易一些。 - rmagnum2002

在这里回答： https://dev59.com/1V_Va4cB1Zd3GeqPQBzB - nikmauro

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 */
}

- Robert

---

这个概念对我很有效，除了CSS之外，我不得不删除填充行...我所需要的只是边距（填充弄乱了它）。 - Mark

Answer 2

添加边框会增加额外的1像素，这会破坏布局。不要将边框添加到网格列中，尝试在其中添加一个 div 并给它添加边框。

- gtamil

---

让我试试这个，希望这个能修复它 :D - Rao

Answer 3

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

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

- Stuart Burrows

---

目前我已经添加了背景图片并提交审核，但我真的希望能够使用CSS来实现，感谢您详细的回复。 - Rao

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;
}

• Column-gap修改器

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

- Ashwin