带有偶数列的CSS网格的棋盘背景颜色？

Question

我有一个多行的 CSS 网格，每行有 6 列。

我想使用 CSS 来交替每个单元格的背景颜色并逐行改变它。

所以第一行（奇数行），所有偶数单元格都有蓝色背景，奇数单元格有黑色背景。

第二（偶数）行，所有偶数单元格将具有黑色背景，奇数单元格将具有蓝色背景。

由于所有网格元素都是同级元素，因此我很难使用 CSS 来实现这一点，因此使用 nth-child(odd) 会生成颜色列而不是交错的棋盘格。

如果有人想乱来，我已经附上了一支笔。

理想情况下，我想要一个不向标记添加一堆类的纯 CSS 解决方案。不过，如有必要，我愿意接受 JS 帮助。

https://codepen.io/qotsa42/pen/BaZWwMq

<div class='grid'>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>  
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>  
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>

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

.box {
  height: 100px;
  width: 100px;
}

.box:nth-child(even) {
  background-color: blue;
}
.box:nth-child(odd) {
  background-color: black;
}

Answer 1

从您的 6 列代码中，您可以看到每 12 个元素有一个重复模式。 您可以从那里开始 :nth-child(12n) 并从第 12 个位置偏移其他 6 个位置。

例子

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

.box {
  height: 100px;
  width: 100px;
}

.box {
  background-color: blue;
}

.box:nth-child(12n + 2),
.box:nth-child(12n + 4),
.box:nth-child(12n + 6),
/* next row  of 6 */
.box:nth-child(12n + 7),
.box:nth-child(12n + 9),
.box:nth-child(12n + 11) {
  background-color: black;
}


/* demo */

.grid {
  width: max-content;
  margin: auto;
}

<div class='grid'>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>