如何为Grid行实现棋盘式交替背景色效果？

API 探路者

2026-8-25

实现Grid棋盘格（行尾与下一行首元素同色）

可以通过CSS的:nth-child()公式选择器实现你要的效果。核心思路是针对2列布局，让每行的颜色与上一行交替，从而保证上一行末尾元素的背景色和下一行开头元素的背景色一致。

修改后的CSS代码

.cards-container {
  display: grid;
  grid-template-columns: repeat(2, 10rem);
  gap: 0; /* 可选，消除间距让颜色衔接更自然 */
}

.card {
  border: 1px solid black;
  background-color: #4268af; /* 默认蓝色背景 */
  padding: 1rem; /* 可选，增加内边距让内容更美观 */
}

/* 选中第2、3、6、7...个元素，设置白色背景 */
.cards-container > a:nth-child(4n+2),
.cards-container > a:nth-child(4n+3) {
  background-color: #ffffff;
}

完整代码示例

<div class="cards-container">
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
</div>