如何用CSS实现响应式奇偶列均生效的棋盘格网格？

当然可以，不需要JavaScript就能解决这个问题。核心矛盾是偶数列时，默认的nth-child(odd/even)规则会导致下一行首元素与上一行尾元素颜色相同，破坏棋盘格的连续性。我们可以通过针对不同列数调整选择器公式，或者利用行列奇偶组合来修复这个问题。

方法1：媒体查询结合:nth-child()公式（精准可控） #

假设你的Grid容器类是.grid，先定义基础样式，再通过媒体查询匹配不同屏幕宽度下的列数，调整每个格子的颜色规则：

.grid {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

/* 基础样式：所有格子默认浅灰 */
.grid > .item {
  background-color: #f0f0f0;
  padding: 2rem;
  border-radius: 4px;
}

/* 1列（默认）：单列自然纵向交替 */
.grid {
  grid-template-columns: 1fr;
}
.grid > .item:nth-child(even) {
  background-color: #e0e0e0;
}

/* 2列（偶数）：每4个元素为一组，第1、4个浅灰，第2、3个深灰 */
@media (min-width: 480px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid > .item:nth-child(4n+1),
  .grid > .item:nth-child(4n+4) {
    background-color: #f0f0f0;
  }
  .grid > .item:nth-child(4n+2),
  .grid > .item:nth-child(4n+3) {
    background-color: #e0e0e0;
  }
}

/* 3列（奇数）：直接按元素奇偶切换颜色 */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid > .item:nth-child(odd) {
    background-color: #f0f0f0;
  }
  .grid > .item:nth-child(even) {
    background-color: #e0e0e0;
  }
}

/* 4列（偶数）：每8个元素为一组，第1、4、5、8个浅灰，其余深灰 */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid > .item:nth-child(8n+1),
  .grid > .item:nth-child(8n+4),
  .grid > .item:nth-child(8n+5),
  .grid > .item:nth-child(8n+8) {
    background-color: #f0f0f0;
  }
  .grid > .item:nth-child(8n+2),
  .grid > .item:nth-child(8n+3),
  .grid > .item:nth-child(8n+6),
  .grid > .item:nth-child(8n+7) {
    background-color: #e0e0e0;
  }
}

方法2：CSS变量+动态计算（更灵活） #

如果不想写多个媒体查询，可以用CSS变量定义列数，再通过:nth-child()的通用公式实现，核心是根据列数奇偶调整颜色切换周期：

.grid {
  --cols: 1;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 1rem;
  padding: 1rem;
}

.grid > .item {
  background-color: #f0f0f0;
  padding: 2rem;
  border-radius: 4px;
}

/* 列数为奇数时，直接按元素奇偶切换颜色 */
@media (min-width: 768px) {
  .grid { --cols: 3; }
  .grid > .item:nth-child(even) {
    background-color: #e0e0e0;
  }
}

/* 列数为偶数时，按2倍列数的周期切换颜色 */
@media (min-width: 480px) and (max-width: 767px) {
  .grid { --cols: 2; }
  /* 周期为4（2*2），奇行偶位、偶行奇位变色 */
  .grid > .item:nth-child(4n+2),
  .grid > .item:nth-child(4n+3) {
    background-color: #e0e0e0;
  }
}

@media (min-width: 1024px) {
  .grid { --cols: 4; }
  /* 周期为8（2*4） */
  .grid > .item:nth-child(8n+2),
  .grid > .item:nth-child(8n+3),
  .grid > .item:nth-child(8n+6),
  .grid > .item:nth-child(8n+7) {
    background-color: #e0e0e0;
  }
}

原理说明 #

棋盘格的核心是相邻格子（上下左右）颜色不同：

• 奇数列时，每行元素数为奇数，下一行首元素的奇偶性与上一行尾元素相反，默认的nth-child(odd/even)就能满足需求。
• 偶数列时，每行元素数为偶数，下一行首元素的奇偶性与上一行尾元素相同，因此需要将切换周期改为2*列数，让偶数行的颜色规则与奇数行翻转，保证上下相邻格子颜色不同。

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