Collapsing borders using CSS Grid

by

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>

Leave a Comment