使用Grid Css折叠边框？

Question

我已经使用Divs和grid css构建了一个“表”，我正在寻找如何使用grid 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>

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