如何不使用大量div元素实现完整填充的CSS Grid布局？

你当前通过大量空div实现Grid布局，可通过CSS技巧大幅精简HTML代码，同时保留原有布局效果：

核心优化思路 #

用CSS背景渐变模拟空单元格的白色背景替代空div，只保留带实际内容的元素，再通过Grid定位将内容放到对应位置。

简化后的HTML代码 #

<div class="modalDayBackground">
  <!-- 左上角占位单元格 -->
  <div class="cell top-left"></div>
  <!-- 时间表头 -->
  <div class="cell time">8:00</div>
  <div class="cell time">10:00</div>
  <div class="cell time">12:00</div>
  <div class="cell time">14:00</div>
  <div class="cell time">16:00</div>
  <div class="cell time">18:00</div>
  <div class="cell time">20:00</div>
</div>

优化后的CSS代码 #

::deep .modalDayBackground {
  background-color: #eee;
  position: absolute;
  display: grid;
  top: 6.5em;
  left: 0.65em;
  width: 100%;
  height: 56.3em;
  /* 保留原行列尺寸定义 */
  grid-template-columns: 2.35em 5.1em 5.2em 5.1em 5.2em 5.1em 5.2em 5.5em;
  grid-template-rows: 3.5em 2.7em 2.45em 2.5em 2.55em 2.55em;
  /* 用渐变绘制所有空单元格的白色背景+灰色分隔线 */
  background-image: 
    /* 横向列背景 */
    linear-gradient(to right,
      white 0 2.35em, #eee 2.35em calc(2.35em + 1px),
      white calc(2.35em + 1px) calc(2.35em + 1px + 5.1em), #eee calc(2.35em + 1px + 5.1em) calc(2.35em + 2px + 5.1em),
      white calc(2.35em + 2px + 5.1em) calc(2.35em + 2px + 5.1em + 5.2em), #eee calc(2.35em + 2px + 5.1em + 5.2em) calc(2.35em + 3px + 5.1em + 5.2em),
      white calc(2.35em + 3px + 5.1em + 5.2em) calc(2.35em + 3px + 5.1em + 5.2em + 5.1em), #eee calc(2.35em + 3px + 5.1em + 5.2em + 5.1em) calc(2.35em + 4px + 5.1em + 5.2em + 5.1em),
      white calc(2.35em + 4px + 5.1em + 5.2em + 5.1em) calc(2.35em + 4px + 5.1em + 5.2em + 5.1em + 5.2em), #eee calc(2.35em + 4px + 5.1em + 5.2em + 5.1em + 5.2em) calc(2.35em + 5px + 5.1em + 5.2em + 5.1em + 5.2em),
      white calc(2.35em + 5px + 5.1em + 5.2em + 5.1em + 5.2em) calc(2.35em + 5px + 5.1em + 5.2em + 5.1em + 5.2em + 5.1em), #eee calc(2.35em + 5px + 5.1em + 5.2em + 5.1em + 5.2em + 5.1em) calc(2.35em + 6px + 5.1em + 5.2em + 5.1em + 5.2em + 5.1em),
      white calc(2.35em + 6px + 5.1em + 5.2em + 5.1em + 5.2em + 5.1em) calc(2.35em + 6px + 5.1em + 5.2em + 5.1em + 5.2em + 5.1em + 5.2em), #eee calc(2.35em + 6px + 5.1em + 5.2em + 5.1em + 5.2em + 5.1em + 5.2em) calc(2.35em + 7px + 5.1em + 5.2em + 5.1em + 5.2em + 5.1em + 5.2em),
      white calc(2.35em + 7px + 5.1em + 5.2em + 5.1em + 5.2em + 5.1em + 5.2em) 100%
    ),
    /* 横向行背景 */
    linear-gradient(to bottom,
      white 0 3.5em, #eee 3.5em calc(3.5em + 1px),
      white calc(3.5em + 1px) calc(3.5em + 1px + 2.7em), #eee calc(3.5em + 1px + 2.7em) calc(3.5em + 2px + 2.7em),
      white calc(3.5em + 2px + 2.7em) calc(3.5em + 2px + 2.7em + 2.45em), #eee calc(3.5em + 2px + 2.7em + 2.45em) calc(3.5em + 3px + 2.7em + 2.45em),
      white calc(3.5em + 3px + 2.7em + 2.45em) calc(3.5em + 3px + 2.7em + 2.45em + 2.5em), #eee calc(3.5em + 3px + 2.7em + 2.45em + 2.5em) calc(3.5em + 4px + 2.7em + 2.45em + 2.5em),
      white calc(3.5em + 4px + 2.7em + 2.45em + 2.5em) calc(3.5em + 4px + 2.7em + 2.45em + 2.5em + 2.55em), #eee calc(3.5em + 4px + 2.7em + 2.45em + 2.5em + 2.55em) calc(3.5em + 5px + 2.7em + 2.45em + 2.5em + 2.55em),
      white calc(3.5em + 5px + 2.7em + 2.45em + 2.5em + 2.55em) 100%
    );
  background-repeat: no-repeat;
}

::deep .modalDayBackground .cell {
  color: #8391a2;
  background-color: transparent; /* 透出容器渐变背景 */
}

/* 定位左上角单元格 */
::deep .top-left {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

/* 定位时间表头到对应位置 */
::deep .time:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; }
::deep .time:nth-child(3) { grid-column: 3 / 4; grid-row: 1 / 2; }
::deep .time:nth-child(4) { grid-column: 4 / 5; grid-row: 1 / 2; }
::deep .time:nth-child(5) { grid-column: 5 / 6; grid-row: 1 / 2; }
::deep .time:nth-child(6) { grid-column: 6 / 7; grid-row: 1 / 2; }
::deep .time:nth-child(7) { grid-column: 7 / 8; grid-row: 1 / 2; }
::deep .time:nth-child(8) { grid-column: 8 / 9; grid-row: 1 / 2; }

备选方案：JavaScript动态生成网格 #

若允许使用JS，可彻底精简HTML，自动生成所有单元格：

<div class="modalDayBackground" id="gridContainer"></div>

const container = document.getElementById('gridContainer');
const totalCells = 8 * 6; // 8列×6行
const timeLabels = ['', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'];

for (let i = 0; i < totalCells; i++) {
  const cell = document.createElement('div');
  if (i < 8) cell.textContent = timeLabels[i]; // 第一行填充时间
  container.appendChild(cell);
}

此方案HTML极简，后期修改行列数更便捷。

效果展示 #

优化后的布局与原效果完全一致：

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