如何在PHP循环中复现该CSS Grid布局？

需要制作一个复杂的Grid布局，要求布局规则可重复——渲染完第10个元素后，后续元素自动沿用第1到第10个的布局规则循环展示。布局效果参考下图：

现有HTML结构示例 #

<div class="grid">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
  <div class="item">item 9</div>
  <div class="item">item 10</div>
  ...
</div>

已编写的CSS代码 #

.grid {
  display: grid;
  grid-template-rows: repeat(10, 1fr);
  grid-template-columns: repeat(4, 1fr);
}

解决方案 #

利用CSS的:nth-child(10n + x)选择器，针对每一组（10个元素）内的对应位置元素设置网格占位规则，实现布局循环重复。

调整后的完整CSS代码：

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px; /* 可根据需求调整元素间距 */
  auto-rows: 100px; /* 固定行高，也可改用1fr让行高自适应 */
}

/* 匹配第1、11、21...个元素（每组第1个） */
.item:nth-child(10n + 1) {
  grid-column: span 2;
  grid-row: span 2;
}

/* 匹配第4、14、24...个元素（每组第4个） */
.item:nth-child(10n + 4) {
  grid-row: span 2;
}

/* 匹配第5、15、25...个元素（每组第5个） */
.item:nth-child(10n + 5) {
  grid-column: span 2;
}

/* 匹配第8、18、28...个元素（每组第8个） */
.item:nth-child(10n + 8) {
  grid-column: span 2;
  grid-row: span 2;
}

/* 可选：给元素添加样式方便查看布局 */
.item {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

说明：

• 10n + x 中的10是每组元素的数量，x是组内元素的位置（1到10），通过这个选择器可以精准定位每一组的对应元素。
• grid-column: span 2 表示元素占据2列宽度，grid-row: span 2表示占据2行高度，可根据你的布局示意图调整占位数量。
• 若布局示意图中的元素占位和上述代码不符，只需修改对应nth-child规则中的span值即可。

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