如何让CSS Grid所有单元格显示网格线（含空单元格与跨列元素）

嘿，我太懂你遇到的这个痛点了——默认给Grid子元素加边框的话，空单元格没边框、跨列元素还会把原本的单元格边框给“吃掉”，手动加空元素又完全不灵活。其实换个思路就能优雅解决：用网格容器的背景渐变+gap属性来模拟完整的网格线，根本不需要额外的元素或者复杂的子网格逻辑！

具体实现方法 #

核心思路是把网格线“移”到容器上，而不是每个子元素上：

• 用gap来定义单元格之间的间距（也就是网格线的宽度）
• 给容器加背景色或者渐变，让这个间距显示成网格线
• 子元素只负责自己的内容样式，不用管边框

基础版代码（统一颜色的网格线） #

CSS

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  /* gap值就是你想要的网格线宽度 */
  gap: 1px;
  /* 网格线的颜色 */
  background-color: #000;
  /* 容器边缘也加上和网格线一样的边框 */
  padding: 1px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  /* 去掉原来子元素的border，避免冲突 */
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.longer {
  grid-column: auto / span 2;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item longer">7</div>
  <!-- 哪怕这里有空的网格区域，边框也会自动显示 -->
</div>

为什么这是最优解？ #

• 完全灵活：不管单元格有没有内容、子元素跨多少列/行，网格线都会完整铺满整个网格区域
• 代码简洁：只需要修改容器的样式，子元素不需要任何额外逻辑，维护起来超轻松
• 易定制：网格线的颜色改background-color就行，宽度改gap就行，想调样式直接改容器属性

进阶版：不同颜色的横竖网格线 #

如果需要横竖线颜色不一样，用多层线性渐变就能实现：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 1px;
  /* 横向线用灰色，纵向线用黑色 */
  background: 
    linear-gradient(to right, #888 1px, transparent 1px) repeat-x,
    linear-gradient(to bottom, #000 1px, transparent 1px) repeat-y;
  /* 这里的3对应你的列数/行数，要和grid-template-columns的数量一致 */
  background-size: calc(100% / 3) 100%, 100% calc(100% / 3);
  padding: 1px;
}

这样就能完美满足你的需求啦，再也不用纠结空单元格和跨列元素的边框问题～

内容的提问来源于stack exchange，提问作者Gergő Horváth