使用Grid Css折叠边框？答案

【问题标题】：Collapse border using Grid Css?使用Grid Css折叠边框？
【发布时间】：2018-10-23 14:51:23
【问题描述】：

我已经使用 Divs 和网格 css 构建了一个“表格”，我正在研究如何使用网格 css 折叠边框。

问题：如果上面的 div 有一个底部边框，而下面的 div 有一个顶部边框，则会出现双边框。

我们可以避免吗？

.bodyTable {
    grid-template-columns: 220px 220px 220px 220px;
    grid-template-rows: 110px 110px 110px;
}

.displayGrid {
    display: grid;
}

.borderBottom{
  border: solid;
  border-width: 0px 0px 1px 0px;
}

.borderTop{
   border: solid;
   border-width: 1px 0px 0px 0px;
}

<div id="table" class="displayGrid bodyTable">
   <div class="borderBottom">
      A
   </div>
   <div class="borderBottom">
      B
   </div>
   <div class="borderBottom">
      C
   </div>
   <div class="borderBottom">
      D
   </div>
   <div class="borderTop">
      G
   </div>
   <div  class="borderTop">
      H 
   </div>
   <div>
      I
   </div>
   <div>
      J
   </div>
   <div>
      M
   </div>
   <div>
      N
   </div>
   <div>
      O
   </div>
   <div>
      P
   </div>
</div>

【问题讨论】：

可能重复：stackoverflow.com/questions/47882924/…
恕我直言，这不是重复的，我正在寻找一种方法（属性？）在保持类和边界集的同时拥有一条线
这是一个可能重复，我没有关闭为重复.. 你会发现一些想法如何处理这个问题，因为问题是相似的
@Zardo，如果这不是重复的，请在问题的文本中告诉我们如何（即，不在 cmets 中）。也就是说，这现在是您研究的一部分。
我不想像链接的问题那样在每个单元格上都有边框

标签： html css css-grid

【解决方案1】：

一个简单的解决方案是给borderTop 一个负边距。但是，这取决于应用类的位置。

.bodyTable {
    grid-template-columns: 220px 220px 220px 220px;
    grid-template-rows: 110px 110px 110px;
}

.displayGrid {
    display: grid;
}

.borderBottom{
  border: solid;
  border-width: 0px 0px 1px 0px;
}

.borderTop{
   border: solid;
   border-width: 1px 0px 0px 0px;
   margin-top: -1px;
}

<div id="table" class="displayGrid bodyTable">
   <div class="borderBottom">
      A
   </div>
   <div class="borderBottom">
      B
   </div>
   <div class="borderBottom">
      C
   </div>
   <div class="borderBottom">
      D
   </div>
   <div class="borderTop">
      G
   </div>
   <div  class="borderTop">
      H 
   </div>
   <div>
      I
   </div>
   <div>
      J
   </div>
   <div>
      M
   </div>
   <div>
      N
   </div>
   <div>
      O
   </div>
   <div>
      P
   </div>
</div>

【讨论】：