<div class="grid collapse">
 <div class="grid__item"></div> 
  <div class="grid__item"></div> 
  <div class="grid__item"></div> 
  <div class="grid__item"></div> 
  <div class="grid__item"></div> 
  <div class="grid__item"></div> 
  <div class="grid__item"></div> 
  <div class="grid__item"></div> 
  <div class="grid__item"></div> 
</div>

<div class="grid two-side">
 <div class="grid__item_side"></div> 
  <div class="grid__item_side"></div> 
  <div class="grid__item_side"></div> 
  <div class="grid__item_side"></div> 
  <div class="grid__item_side"></div> 
  <div class="grid__item_side"></div> 
  <div class="grid__item_side"></div> 
  <div class="grid__item_side"></div> 
  <div class="grid__item_side"></div> 
</div>

<div class="grid outline">
 <div class="grid__outline"></div> 
  <div class="grid__outline"></div> 
  <div class="grid__outline"></div> 
  <div class="grid__outline"></div> 
  <div class="grid__outline"></div> 
  <div class="grid__outline"></div> 
  <div class="grid__outline"></div> 
  <div class="grid__outline"></div> 
  <div class="grid__outline"></div> 
</div>

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 4rem);
 margin-top: 20px;
 
}


.grid__item {
    border: 2px solid black;
}

.collapse {
 border-collapse: collapse;
}

:root {
    --grid-border: 1px solid rgb(203 213 225);
}

.two-side {
     border-top: var(--grid-border);
    border-left: var(--grid-border);
}

.grid__item_side {
     border-right: var(--grid-border);
    border-bottom: var(--grid-border);
}


.outline {
 grid-gap: 5px;
}

.grid__outline {

/*   border: 5px solid black; */
  outline: 5px solid rgb(203 213 225);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.