HTML布局中Grid行背景色设置的最优方案及直接设置方法咨询

你设计了一个两行三列的Grid布局：第一行高度固定100px，第二行占满剩余视口高度，当前使用的容器CSS如下：

.grid-container{
  display:grid;
  grid-template-columns: 20vw 60vw 20vw;
  grid-template-rows:100px calc(100vh - 100px);
}

你尝试通过选择第一行的三个网格项目来设置背景，但不确定这种方法是否合理，同时想知道能否直接在Grid容器中为模板行设置背景。

现有方法的合理性分析 #

你当前写的选择器存在错误：

.grid-container > div:nth-child(1),
              div:nth-child(2),
              div:nth-child(3) {
  background: white;
}

这里的div:nth-child(2)和div:nth-child(3)没有加上.grid-container >的父级限制，会匹配页面中所有位置的第2、3个div，导致样式污染。修正后的正确选择器应该是：

.grid-container > div:nth-child(1),
.grid-container > div:nth-child(2),
.grid-container > div:nth-child(3) {
  background: white;
}

或者更简洁的写法：

.grid-container > div:nth-child(-n+3) {
  background: white;
}

修正后的选择器是合理的，但属于给网格项目单独设置样式的方式，当第一行的网格项目数量变化时需要调整选择器，灵活性一般。

能否直接在Grid容器中为模板行设置背景？ #

不行。CSS Grid的grid-template-rows只是定义网格轨道的尺寸，轨道本身不是DOM元素，没有对应的样式属性可以直接设置背景。网格容器的背景会覆盖整个容器，无法单独针对某一行轨道设置背景。

更优的替代方案 #

方案1：使用伪元素覆盖第一行 #

通过给网格容器添加伪元素，让它占据第一行的所有列，设置背景后置于底层，不影响原有网格项目的交互：

.grid-container {
  position: relative;
  display: grid;
  grid-template-columns: 20vw 60vw 20vw;
  grid-template-rows: 100px calc(100vh - 100px);
}
.grid-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px; /* 对应第一行的高度 */
  background: white;
  z-index: -1; /* 放在网格项目下方 */
}

这种方法不需要修改网格项目的选择器，即使第一行的列数变化，伪元素依然能覆盖整行。

方案2：合并第一行单元格（如果布局允许） #

如果第一行的三个单元格不需要独立的内容或样式，可以直接合并成一个单元格，这样只需要给这个单元格设置背景即可：

<div class="grid-container">
  <!-- 头部：合并第一行三列 -->
  <div style="grid-column: 1 / -1;"></div>
  <!-- 主内容 -->
  <div></div>
  <div></div>
  <div></div>
</div>

对应的CSS：

.grid-container > div:first-child {
  background: white;
}

这种方式更简洁，减少了DOM元素数量，适合第一行作为整体头部的场景。

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