只有内部边框的九宫格

要实现只有内部边框的九宫格，可以使用 CSS 的伪元素 ::before 和 ::after，代码如下：

<div class="grid-container">
  <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>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 10px;
}

.grid-item {
  background-color: #ccc;
  height: 100px;
  position: relative;
}

.grid-item::before,
.grid-item::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #000;
  z-index: -1;
}

.grid-item::before {
  top: 0;
  left: 0;
}

.grid-item::after {
  bottom: 0;
  right: 0;
}

这里还是使用了 CSS 的 grid 布局，通过设置 grid-template-columns 属性为 repeat(3, 1fr) 实现了九宫格的效果。同时，通过设置 grid-gap 属性为 10px 实现了格子之间的间距，通过设置 padding 属性为 10px 实现了九宫格与边框之间的距离。

在每个格子中，使用了伪元素 ::before 和 ::after，通过设置它们的 position 为 absolute 实现了它们与格子的重叠。通过设置它们的 width 和 height 为 100% 实现了它们与格子大小相同，通过设置它们的 border 为 2px solid #000 实现了内部边框的效果，同时，通过设置它们的 z-index 为 -1，将它们放在格子下面，从而实现了只有内部边框的九宫格效果。