Collapsing borders using CSS Grid

Question

I'm having fun getting my head around the new CSS Grid spec, but I'm running into trouble with borders.

Is it possible to collapse borders in a CSS Grid, or is there any way to style the gutter?

As you can see in the snippet below, the 10px borders stack (20px total) in-between blocks.

I understand this issue isn't unique to CSS Grids, but I'm hoping it'll allow for new solutions for creating a uniform 10px border between all boxes and on the outer edges.

My actual use-case is a calendar I'm making to practice working with Grids and React components. You can see the issue I'm running into here:

.

Since every month is different, I'll have a lot of different edge-cases to consider.

I'm loving the Grid, but finding it very hard to Google! Even some suggestions on how to improve my question would be much appreciated. Is border collapsing the right term? Internal gridlines?

Thanks!

Answer 1

You may use grid-gap and box-shadow:

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  box-sizing: border-box;
  grid-gap:10px;
}

.block {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
 box-shadow:0 0 0 10px palegreen;
}

.first {
  grid-column: 2 / span 1;
}

<div class='container'>
  <div class='block first'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
</div>

Or combine row and columns template setting:

.container {
  display: grid;
  grid-template-columns: 110px 110px;
  grid-template-rows:110px;
  box-sizing: border-box;
  
}

.block {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
 border:solid 10px palegreen;
}

.first {
  grid-column: 2 / span 1;
}

<div class='container'>
  <div class='block first'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
</div>

Note that columns and rows of 120px will show both sides borders when box is set to 100px...

If fr value is used for columns, then do not set width on boxes (rows would follow same restriction).

.container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 110px;
  /*whatever else */
  box-sizing: border-box;
}

.block {
  margin: 0 -10px 0 0;/* fixed width value missing */
  height: 100px;
  background-color: lightgrey;
  border: solid 10px palegreen;
}

.first {
  grid-column: 2 / span 1;
}

<div class='container'>
  <div class='block first'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
  <div class='block'>4</div>
  <div class='block'>5</div>
  <div class='block'>6</div>
  <div class='block'>7</div>
</div>