CSS Grid：如何为所有项加边框并补全行，消除缺失项灰色区域？

我完全明白你的需求——既要让所有网格项带1px边框，又要让网格线贯穿整个容器，哪怕最后一行项数不足，还要避开背景色的方案，同时适配响应式的列数变化。下面就给你一个纯CSS的解决方案，用到你提到的特殊伪类技巧：

核心思路 #

1. 避免边框重叠：用gap: 1px代替边框间距，让网格项的边框不会相互叠加，同时保证网格线的一致性。
2. 补全空缺行：利用容器的伪元素模拟占位符，填充最后一行的空缺位置，这些占位符和真实网格项拥有完全一致的边框和背景，消除灰色区域。
3. 响应式适配：结合auto-fit实现动态列数，再用CSS的:has选择器（现代浏览器支持）判断最后一行的项数，动态显示/隐藏多余的占位符。

完整代码实现 #

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.grid-container {
  display: grid;
  /* 响应式列：最小200px，自动填充剩余空间 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* 1px的间距，作为网格线的"缝隙"，避免边框重叠 */
  gap: 1px;
  margin: 2rem;
}

.grid-item {
  /* 真实的1px边框 */
  border: 1px solid #2d3748;
  padding: 1.5rem;
  background: #ffffff;
}

/* 生成两个占位符伪元素，最多补全2个空缺位置（可根据需求增加） */
.grid-container::before,
.grid-container::after {
  content: "";
  border: 1px solid #2d3748;
  background: #ffffff;
  /* 每个占位符占一个网格列 */
  grid-column: span 1;
}

/* 当最后一行刚好填满时，隐藏所有占位符 */
.grid-container:has(:nth-last-child(1):nth-child(n))::before,
.grid-container:has(:nth-last-child(1):nth-child(n))::after {
  display: none;
}

/* 当最后一行缺1个项时，只显示一个占位符 */
.grid-container:has(:nth-last-child(1):nth-child(n+1))::before {
  display: none;
}

细节说明 #

• 边框处理：通过gap:1px让网格项的边框之间有1px的间隔，避免了相邻项边框叠加成2px的问题，同时视觉上形成了连贯的网格线。
• 占位符适配：用:has选择器检测最后一行的项数，动态调整占位符的显示状态。如果你的目标浏览器不支持:has，可以用JavaScript辅助计算空缺数量，动态添加占位符元素。
• 响应式兼容：auto-fit会根据容器宽度自动调整列数，占位符会始终补全最后一行的空缺，不管每行显示2个、3个还是更多项。

兼容性提示 #

如果需要兼容不支持:has的旧浏览器（比如Firefox旧版本），可以用以下替代方案：

1. 用JavaScript计算当前每行的列数和总项数，算出需要的占位符数量。
2. 动态创建对应数量的占位符元素，添加到网格容器中，样式和grid-item保持一致。

这样就能完美实现你想要的效果——网格线贯穿整个容器，没有灰色空缺区域，且完全适配响应式布局！

内容的提问来源于stack exchange，提问作者tobias47n9e