CSS Border grid layout-CodePudding

I'm trying to set border for a grid layout with a vertical spanned cell. As suggested in some other forum posts, I set "margin-left: -1px" to avoid double borders (in the case a cell with right border is next to a cell with left border)

The problem is that only one part of the vertical border of the spanned cell is displayed, see example. How to solve it?

.grid-container {
  display: grid;
  grid-template-columns: 90px 90px 90px;
  grid-template-rows: 24px 24px 27px;
}

.grid-item {
  background-color: #EEEEEE;
}

<div >
  <div >1</div>
  <div >2</div>
  <div  style="grid-row: span 3; border: solid 1px;margin-left: -1px;">3</div>
  <div >4</div>
  <div >5</div>
  <div >7</div>
  <div >8</div>
</div>

CodePudding user response：

In this particular case the problem is arising because the 5 and 8 items come after the 3.

One way round it is to give the 3 item a higher z-index.

.grid-container {
  display: grid;
  grid-template-columns: 90px 90px 90px;
  grid-template-rows: 24px 24px 27px;
}

.grid-item {
  background-color: #EEEEEE;
}

<div >
  <div >1</div>
  <div >2</div>
  <div  style="grid-row: span 3; border: solid 1px;margin-left: -1px;z-index: 1;">3</div>
  <div >4</div>
  <div >5</div>
  <div >7</div>
  <div >8</div>
</div>

CodePudding user response：

I would give .grid-container the same background color as the border color and use a gap of equal width as the border for the cell mentioned, or any other cell requiring the same.

In your specific case, with 3 * 90px grid columns, you will need to limit the width of the grid with width: max-content.

Snippet, moved the inline style to .special for clarity...

.grid-container {
  background-color: black; /* added */
  width: max-content;      /* added */
 
  display: grid;
  grid-template-columns: 90px 90px 90px;
  grid-template-rows: 24px 24px 27px;
}

.grid-item {
  background-color: #EEEEEE;
}

.grid-item.special { /* special cell */
  grid-row: span 3;
  border: solid 1px;
  gap: 1px;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >7</div>
  <div >8</div>
</div>