如何用CSS Grid实现自定义重复网格布局模式？

核心思路 #

利用CSS Grid的列跨度（grid-column）结合nth-child循环选择器，针对每个重复周期内的不同位置元素设置列占比，实现「4个/行 → 2个/行 → 12个(3行4个) → 2个/行」的重复布局。每个完整周期包含 4+2+12+2=20 个元素。

实现代码 #

HTML结构

<div class="grid-container">
  <!-- 可放入任意数量的.grid-item元素，布局会自动按周期重复 -->
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <!-- ... 更多元素 ... -->
</div>

CSS样式

.grid-container {
  display: grid;
  /* 默认每行4列，宽度均分 */
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 1rem;
}

.grid-item {
  padding: 2rem;
  background: #f0f0f0;
  border-radius: 4px;
  text-align: center;
}

/* 匹配每个周期的第5、6个元素，设置为每行2个（占2列） */
.grid-item:nth-child(20n + 5),
.grid-item:nth-child(20n + 6) {
  grid-column: span 2;
}

/* 匹配每个周期的第19、20个元素，设置为每行2个（占2列） */
.grid-item:nth-child(20n + 19),
.grid-item:nth-child(20n + 20) {
  grid-column: span 2;
}

效果说明 #

1. 前4个元素：默认占1列，自动排成1行4个；
2. 第5-6个元素：每个占2列，自动排成1行2个；
3. 第7-18个元素：回到默认1列，排成3行4个（共12个）；
4. 第19-20个元素：每个占2列，排成1行2个；
5. 后续元素自动重复上述周期模式。

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