CSS中重复div元素时的grid-area布局问题求解

你当前的问题出在nth-child的选择器写法上，比如:nth-child(1n)会匹配所有元素（1n等价于1、2、3……），这就导致第7个元素会被第一个规则选中，和第1个元素重叠；第8个元素同时匹配多个规则，布局完全混乱。

要实现每6个元素重复一次你设计的布局，需要用6n + x的形式来定位每组的元素，x对应每组内的第1到第6个元素。修改后的CSS如下：

.services-cont {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  grid-template-columns: auto auto auto;
  grid-gap: 30px;
}

/* 每组第1个元素：第1、7、13...个 */
.service-sing:nth-child(6n + 1) {
  grid-area: 1 / 1 / 2 / 2;
}

/* 每组第2个元素：第2、8、14...个 */
.service-sing:nth-child(6n + 2) {
  grid-area: 1 / 2 / 3 / 3;
}

/* 每组第3个元素：第3、9、15...个 */
.service-sing:nth-child(6n + 3) {
  grid-area: 1 / 3 / 2 / 4;
}

/* 每组第4个元素：第4、10、16...个 */
.service-sing:nth-child(6n + 4) {
  grid-area: 2 / 1 / 4 / 2;
}

/* 每组第5个元素：第5、11、17...个 */
.service-sing:nth-child(6n + 5) {
  grid-area: 3 / 2 / 4 / 3;
}

/* 每组第6个元素：第6、12、18...个 */
.service-sing:nth-child(6n + 6) {
  grid-area: 2 / 3 / 4 / 4;
}

这样修改后，不管你新增多少个.service-sing元素，都会自动按照前6个的布局规律重复排列——第7个和第1个位置一致，第8个和第2个位置一致，以此类推。

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