如何用CSS Grid为6列偶数列网格实现棋盘格交错背景色

纯CSS实现方案（无需修改HTML/JS） #

你原来的写法失效是因为每行固定6列（偶数列），直接使用:nth-child(odd/even)会让每一行的奇偶位置规则统一，最终呈现同列颜色一致的效果。
由于布局固定每行6列，每12个网格子元素（对应两行）会构成一个完整的颜色循环周期，我们可以直接按周期匹配元素设置颜色：

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 15px;
}

.box {
  height: 100px;
  width: 100px;
  background-color: black; /* 默认黑色 */
}

/* 匹配周期内需要设为蓝色的元素 */
.box:nth-child(12n + 2),
.box:nth-child(12n + 4),
.box:nth-child(12n + 6),
.box:nth-child(12n + 7),
.box:nth-child(12n + 9),
.box:nth-child(12n + 11) {
  background-color: blue;
}

实现逻辑说明 #

我们需要的棋盘格效果本质是满足(行号 + 列号)为奇数的单元格设为蓝色，其余为黑色：

• 奇数行：列号为偶数时，行号+列号为奇数，对应周期内第2、4、6位
• 偶数行：列号为奇数时，行号+列号为奇数，对应周期内第7、9、11位
  这个方案可以兼容任意行数的扩展，不需要额外调整代码。

可选JS兼容方案（如果后续需要动态调整列数） #

如果后续列数会动态变化，可以用JS批量给元素加样式，不需要改HTML结构：

const cols = 6; // 也可以动态读取grid的gridTemplateColumns属性计算实际列数
document.querySelectorAll('.box').forEach((box, index) => {
  const row = Math.floor(index / cols);
  const col = index % cols;
  box.style.backgroundColor = (row + col) % 2 === 1 ? 'blue' : 'black';
})

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