CSS网格隐式空单元格的格式化方法咨询

嘿，这个问题问得很实用！其实完全不用手动添加一堆空<div>来填充那些隐式空白单元格，有更优雅的办法来实现你想要的外观效果～

先梳理下你给出的示例代码：

基础CSS样式 #

.container { 
  display: grid; 
  grid-template-rows: repeat(3, 20px); 
  grid-template-columns: repeat(3, 20px); 
  gap: 1px; 
} 
.container>div { 
  background-color: #DDE; 
  outline: 1px #11E solid; 
  text-align: center; 
}

极简HTML（仅包含有内容的单元格） #

<p>Minimal HTML:</p>
<div class="container">
  <div style="grid-column: 1; grid-row: 1;">A</div>
  <div style="grid-column: 2 / 4; grid-row: 2;">B</div>
  <div style="grid-column: 3; grid-row: 3;">C</div>
</div>

手动添加空div的版本（用来实现目标外观） #

<p>With explicit empty divs to create desired appearance:</p>
<div class="container">
  <div style="grid-column: 1; grid-row: 1;">A</div>
  <div style="grid-column: 2 / 4; grid-row: 2;">B</div>
  <div style="grid-column: 3; grid-row: 3;">C</div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

更优解决方案：无需手动添加空div #

这里给你两种好用的方法：

方法1：利用容器背景+gap模拟空单元格样式

把单元格的outline去掉，转而给容器设置背景色，配合gap来模拟单元格的边框效果。这样空白区域会自动显示容器的背景，看起来和有内容的单元格边框一致：

.container { 
  display: grid; 
  grid-template-rows: repeat(3, 20px); 
  grid-template-columns: repeat(3, 20px); 
  gap: 1px; 
  background-color: #11E; /* 对应原来的outline颜色 */
} 
.container>div { 
  background-color: #DDE; 
  text-align: center; 
  /* 去掉outline，用容器背景+gap实现边框视觉效果 */
}

方法2：用CSS伪元素自动生成占位单元格

如果需要给空单元格单独设置样式，可以用伪元素生成足够的占位元素，自动填充网格的空白位置：

.container {
  display: grid;
  grid-template-rows: repeat(3, 20px);
  grid-template-columns: repeat(3, 20px);
  gap: 1px;
}
.container>div,
.container::before,
.container::after {
  background-color: #DDE;
  outline: 1px #11E solid;
  text-align: center;
}
/* 生成对应空白区域的伪元素 */
.container::before {
  content: "";
  grid-row: 1;
  grid-column: 2 / 4;
}
.container::after {
  content: "";
  grid-row: 3;
  grid-column: 1 / 3;
}

简单来说，这两种方法都能帮你省去手动添加空div的麻烦，让代码更简洁易维护～

内容来源于stack exchange