CSS 中的响应式棋盘网格？

Question

此代码片段包含一个响应式网格。当您更改屏幕宽度时，列数会自动变化。有时列数为偶数，有时为奇数。当列数为奇数时，单元格会像棋盘一样交替颜色，但当列数为偶数时，它们不会交替颜色。有什么方法可以实现偶数列和奇数列的棋盘效果吗？它需要 Javascript，还是可以单独使用 CSS 来完成？

body {
  margin: 0;
}
.checkers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8em, 1fr)); 
  padding: 1em;
  gap: 1em;
}
.checkers>div {
  background-color: red;
  aspect-ratio: 1/1;
}
.checkers>div:nth-child(even) {
  background-color: blue;
}

<div class="checkers">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </div>

Answer 1

据我所知，对于偶数列无法完成此操作。您可以做的是确保列数始终为奇数。您需要显式设置 的奇数列grid-template-columns，这可以通过媒体查询进行调整。

在此片段中，我借用了Bootstrap 中的断点作为起点。我最初将网格设置为最少 3 列 ( grid-template-columns: repeat(3, 1fr);)，然后在每个断点处递增 2（下一个奇数），最多 13 列：

body {
  margin: 0;
}

.checkers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 1em;
  gap: 1em;
  overflow: hidden;
}

.checkers>div {
  background-color: red;
  aspect-ratio: 1/1;
}

.checkers>div:nth-child(even) {
  background-color: blue;
}

@media (min-width: 576px) {
  .checkers {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 768px) {
  .checkers {
    grid-template-columns: repeat(7, 1fr);
  }
}

@media (min-width: 992px) {
  .checkers {
    grid-template-columns: repeat(9, 1fr);
  }
}

@media (min-width: 1200px) {
  .checkers {
    grid-template-columns: repeat(11, 1fr);
  }
}

@media (min-width: 1400px) {
  .checkers {
    grid-template-columns: repeat(13, 1fr);
  }
}

<div class="checkers">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

您可以将断点大小调整为网格正方形大小的倍数，以根据您的喜好进行调整。