Merge border of different cells with CSS-Grid (border-collapse behavior)

Question

I have found many similar questions such as [this] (Collapsing borders using CSS Grid) one, but I still not found a solution to my problem.

I would like the cross lines of the following snippet to be aligned. Said differently I would like to get (b), not (a)

     |
   --'          |
      .--     --+--
      |         |

    (a)        (b)

.grid  {
  display: grid;
  grid-gap: 0;
  grid-template-columns: 1fr 1fr;
}

.tl { 
   grid-column: 1; 
   grid-row: 1;  
   border-bottom: 5px solid black;
   border-right: 5px solid black;
}
.br { 
   grid-column: 2; 
   grid-row: 2;  
   border-top: 5px solid black;
   border-left: 5px solid black;
}

<div class="grid">
  <div class="tl">&nbsp;</div>
  <div class="br">&nbsp;</div>
</div>

Temani Afif · Accepted Answer · 2019-03-21T10:56:44.140

You can consider box-shadow to approximate it. Half the border with an ouset shadow and the other half with an inset one.

.grid  {
  display: grid;
  grid-gap: 0;
  grid-template-columns: 1fr 1fr;
}

.tl { 
   grid-column: 1; 
   grid-row: 1;
   padding: 0 2px 2px 0;
   box-shadow:
    0px 2px black,
    2px 0px black,
    2px 2px black,
    -2px -2px black inset;
}
.br { 
   grid-column: 2; 
   grid-row: 2;  
   padding: 2px 0 0 2px;
   box-shadow:
    0px -2px black,
    -2px 0px black,
    -2px -2px black,
    2px 2px black inset;
}

<div class="grid">
  <div class="tl">&nbsp;</div>
  <div class="br">&nbsp;</div>
</div>

And in case the grid structure is easy like the one you have you can apply background on the main container:

.grid  {
  display: grid;
  grid-gap: 0;
  grid-template-columns: 1fr 1fr;
  background:
    linear-gradient(#000,#000) center/100% 4px,
    linear-gradient(#000,#000) center/4px 100%;
  grid-gap:4px;
  background-repeat:no-repeat;
}

.tl { 
   grid-column: 1; 
   grid-row: 1;
}
.br { 
   grid-column: 2; 
   grid-row: 2;  
}

<div class="grid">
  <div class="tl">&nbsp;</div>
  <div class="br">&nbsp;</div>
</div>

It's also doable with a complex grid but you need to find the correct values:

.grid  {
  display: grid;
  grid-gap: 0;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  background:
    linear-gradient(#000,#000) 0 calc(100%/3)/50% 4px,
    linear-gradient(#000,#000) 100% calc(2*100%/3)/50% 4px,
    linear-gradient(#000,#000) center top/4px 100%;
  grid-gap:4px;
  background-repeat:no-repeat;
}
.grid > * {
  background:pink;
  min-height:50px;
}

.tl { 
   grid-column: 1; 
   grid-row: 1;
}
.br { 
   grid-column: 2; 
   grid-row: 2;  
}
.x { 
   grid-column: 1; 
   grid-row: 2/4;  
}
.y { 
   grid-column: 2; 
   grid-row: 3/4;  
}

<div class="grid">
  <div class="tl"></div>
  <div class="br"></div>
  <div class="x"></div>
  <div class="y"></div>
</div>

score 1 · Answer 2 · answered Mar 21 '19 at 11:04

An easy fix would be to use negative margins on the br - see demo below:

.grid  {
  display: grid;
  grid-gap: 0;
  grid-template-columns: 1fr 1fr;
}

.tl { 
   grid-column: 1; 
   grid-row: 1;  
   border-bottom: 5px solid black;
   border-right: 5px solid black;
}
.br { 
   grid-column: 2; 
   grid-row: 2;  
   border-top: 5px solid black;
   border-left: 5px solid black;
   margin-left: -5px; /* added */
   margin-top: -5px; /* added */
}

<div class="grid">
  <div class="tl">&nbsp;</div>
  <div class="br">&nbsp;</div>
</div>

Merge border of different cells with CSS-Grid (border-collapse behavior)

2 Answers2