如何实现CSS Grid无限重复网格布局（6项循环）

你遇到的核心问题很明确：目前只给前4个元素设置了网格定位规则，第5、6个及后续元素没有匹配到任何自定义布局，只能按Grid的默认流排列，自然会出现错乱。要实现无限元素+每6个周期重复布局，我们可以通过公式化的:nth-child选择器和调整网格行的自动生成规则来完美解决。

关键修改思路 #

1. 让网格自动扩展行：原来的grid-template-rows固定了4行，当元素超过6个时会溢出。改成grid-auto-rows: 120px后，网格会根据元素数量自动新增行，且行高保持和原有布局一致的120px。
2. 用6n + k公式覆盖所有周期元素：通过:nth-child(6n + 1)到:nth-child(6n + 6)的选择器，为每个周期内的6个元素分别设置布局规则，确保每一组的结构完全重复。

完整可运行代码 #

.wrapper {
  display: grid;
  grid-template-columns: calc(50% - 4px) calc(50% - 4px);
  grid-auto-rows: 120px; /* 自动生成的行保持统一高度 */
  gap: 8px;
  margin-left: 0;
  margin-right: 0;
}

.item {
  background: #bada55;
  padding: 1rem;
  box-sizing: border-box;
  /* 可选：添加文字居中让视觉更整齐 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 周期内第1个元素：左侧跨2行 */
.item:nth-child(6n + 1) {
  grid-row: span 2;
  grid-column: 1;
}

/* 周期内第2个元素：右上第1行 */
.item:nth-child(6n + 2) {
  grid-row: span 1;
  grid-column: 2;
}

/* 周期内第3个元素：右上第2行 */
.item:nth-child(6n + 3) {
  grid-row: span 1;
  grid-column: 2;
}

/* 周期内第4个元素：底部跨两列 */
.item:nth-child(6n + 4) {
  grid-column: 1 / -1;
  grid-row: span 1;
}

/* 周期内第5个元素：右侧跨2行 */
.item:nth-child(6n + 5) {
  grid-row: span 2;
  grid-column: 2;
}

/* 周期内第6个元素：左下第4行 */
.item:nth-child(6n + 6) {
  grid-row: span 1;
  grid-column: 1;
}

<div class="wrapper">
  <a class="item"> Item 1 </a>
  <a class="item"> Item 2 </a>
  <a class="item"> Item 3 </a>
  <a class="item"> Item 4 </a>
  <a class="item"> Item 5 </a>
  <a class="item"> Item 6 </a>
  <a class="item"> Item 7 </a>
  <a class="item"> Item 8 </a>
  <a class="item"> Item 9 </a>
  <a class="item"> Item 10 </a>
  <a class="item"> Item 11 </a>
  <a class="item"> Item 12 </a>
  <!-- 可以继续添加任意数量的元素，布局都会自动重复 -->
</div>

代码细节解释 #

• grid-auto-rows: 120px：彻底解决了固定行高导致的元素溢出问题，网格会动态调整行数，且所有行高保持统一，保证布局一致性。
• 6n + k选择器：n从0开始递增，所以6n+1会匹配第1、7、13...个元素，完美覆盖每个周期的对应位置，让布局无限重复。
• grid-row: span N：比手动设置grid-row-start/end更简洁直观，直接表示元素跨越N行，可读性和维护性更高。
• grid-column: 1 / -1：表示元素从第1列延伸到最后一列，即使后续修改列数，这个规则也能自动适应，不用手动调整代码。

这样修改后，不管你添加多少个.item元素，都会自动按6个一组重复相同的布局，再也不会出现错乱问题。

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