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>

possible duplicate of : https://stackoverflow.com/questions/47882924/preventing-double-borders-in-css-grid/47883171#47883171 — Temani Afif, Oct 23 '18 at 14:56
IMHO it's not a duplicate, I'm looking for a way (property?) to have a single line while maintaining the classes and the borders set — Neo, Oct 23 '18 at 15:01
it's a *possible* duplicate, I didn't close as duplicate .. and there your will find some ideas how you can deal with this because the question is similar — Temani Afif, Oct 23 '18 at 15:03
@Zardo, if this is not a duplicate, tell us how in the text of the question (i.e., not in comments). That is, this is now part of your research. — , Oct 23 '18 at 15:14
I don't want a border on every cell like the linked question — Neo, Oct 24 '18 at 04:59

score 1 · Accepted Answer · answered Oct 23 '18 at 14:55

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>

Collapse border using Grid Css?

1 Answers1