你可以使用一个渐变来实现这一点。我还使你的代码更容易调整。你可以很容易地调整间隙和宽度。其他一切都将遵循：

.grid-holder {
  --g: 5px; /* the gap */
  width: 300px; /* the size */
  
  display: grid;
  aspect-ratio: 1;
  grid-template-columns: 1fr 1fr 1fr;
  margin: auto;
  gap: var(--g);
  background:
   conic-gradient(at calc(100% - var(--g)) calc(100% - var(--g)),#000 75%,#0000 0)
   0 0/calc((100% + var(--g))/3) calc((100% + var(--g))/3)
}

.grid {
  text-align: center;
  padding: 20px;
  cursor: pointer;
}

<div class="grid-holder">
  <div class="grid">1</div>
  <div class="grid">2</div>
  <div class="grid">3</div>
  <div class="grid">4</div>
  <div class="grid">5</div>
  <div class="grid">6</div>
  <div class="grid">7</div>
  <div class="grid">8</div>
  <div class="grid">9</div>
</div>

您可以使用带有:nth-child(number) css属性的css网格来定位特定的div单元格。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  border-spacing: 10px;
}

.grid > div {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  padding: 30px 5px;
}

.grid > div:nth-child(1) {
  border-top: none;
  border-left: none;
}

.grid > div:nth-child(1) {
  border-right: 2px solid black;
}
.grid > div:nth-child(4) {
  border-right: 2px solid black;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}
.grid > div:nth-child(7) {
  border-right: 2px solid black;
}
.grid > div:nth-child(3) {
  border-left: 2px solid black;
}
.grid > div:nth-child(6) {
  border-left: 2px solid black;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}
.grid > div:nth-child(9) {
  border-left: 2px solid black;
}

.grid > div:nth-child(5) {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>