具有偶数列的 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>

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

Checkerboard Background Colors with CSS grid with even number of columns?

css

css-grid