How to make a complex grid grid?

Question

css

Friends, there is a topic that is not easy for me, to make a grid in which the internal elements have a border only between themselves, there should not be borders along the edges, and all this needs to be adaptive.
Here is the grid model

I did so far for child elements, but it doesn't work for responsiveness

.item:nth-child(3n){
  border-right:0px;
}
.item:nth-last-child(-n+3){
  border-bottom:0px;
}

Is there a way to implement such a network while being adaptive?
Here is the model
https://codepen.io/Cheizer/pen/qBBvEEV

Answer 1

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 2px;
  background: red;
}

span {
  background: white;
  height: 100px;
}