Collapse border using Grid Css?

Question

I have constructed a "table"using Divs and grid css and I'm looking how to collapse border using grid css.

Issue: if the above div has a bottom border and the lower div has a top border there is a double border.

Can we avoid it?

 .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

A easy solution would be to give the borderTop a negative margin. However this depends on where the class is applied.

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