如何使用CSS的nth-of-child实现重复的不规则网格颜色图案？

我们需要实现一个3列网格，颜色排列遵循以下模式（9个元素为一个循环单元，后续重复该规律）：

Blue, Gray, Green
Green, Blue, Gray
Gray, Green, Blue

实现步骤 #

1. HTML结构

先创建网格容器和对应的元素：

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <!-- 可添加更多.grid-item测试循环效果 -->
</div>

2. CSS样式

首先设置网格布局基础样式：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px); /* 固定列宽，也可用1fr实现自适应 */
  gap: 2px; /* 可选，添加元素间距 */
}

.grid-item {
  height: 100px; /* 设置元素高度，方便查看颜色效果 */
}

然后通过:nth-child选择器定位对应元素并设置颜色：

/* 匹配所有蓝色位置：第1、5、9、13...个元素 */
.grid-item:nth-child(9n+1),
.grid-item:nth-child(9n+5),
.grid-item:nth-child(9n+9) {
  background-color: blue;
}

/* 匹配所有灰色位置：第2、6、7、11、15、16...个元素 */
.grid-item:nth-child(9n+2),
.grid-item:nth-child(9n+6),
.grid-item:nth-child(9n+7) {
  background-color: gray;
}

/* 匹配所有绿色位置：第3、4、8、12、13、17...个元素 */
.grid-item:nth-child(9n+3),
.grid-item:nth-child(9n+4),
.grid-item:nth-child(9n+8) {
  background-color: green;
}

逻辑说明 #

整个颜色模式以9个元素为一个循环周期，因此使用9n+X的选择器公式来定位每个周期内的对应位置（n从0开始取值），这样就能让颜色规律无限重复下去。

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