Свернуть границу с помощью Grid Css?

Question

Я построил «таблицу» с использованием Div и сетки 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>

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>