如何用CSS Grid与:nth-child实现2-1循环交替的产品网格布局

问题分析 #

你需要的是第一行2个元素、第二行1个元素的无限循环布局，核心是利用CSS Grid的列定义和:nth-child选择器精准控制元素的跨列行为。原有代码的问题在于grid-template-columns设置为不等宽列（1fr 2fr），导致跨列后布局不符合预期，同时:nth-child的逻辑需要结合网格列数调整。

解决方案代码 #

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 定义两列等宽网格 */
  gap: 5px;
  width: 70vw;
  margin: 0 auto;
}

/* 选中每3个元素中的第3个（3、6、9...），让它横跨整个网格宽度 */
.item:nth-child(3n + 3) {
  grid-column: 1 / -1; /* 等同于 span 2，从第一列到最后一列 */
  background-color: #e2a7de;
}

/* 调试样式 */
.item {
  background-color: #ffa900;
  padding: 10px;
  text-align: center;
}

<div class="container">
  <div class="item">X</div>
  <div class="item">X</div>
  <div class="item">X</div>
  <div class="item">X</div>
  <div class="item">X</div>
  <div class="item">X</div>
  <div class="item">X</div>
</div>

逻辑解释 #

1. 网格列定义：repeat(2, 1fr)创建两列等宽的网格，确保前两个元素能刚好填满一行。
2. 选择器控制跨列：:nth-child(3n + 3)会匹配每3个元素组的最后一个元素（第3、6、9...个），通过grid-column: 1 / -1让它占据整个网格的宽度，自然形成单独一行。
3. 自动循环布局：Grid的自动流布局会自动处理换行逻辑，每3个元素为一组：前两个填充一行，第三个单独占一行，无限重复这个模式。

替代方案（Flexbox实现） #

如果你更倾向于使用Flexbox，也可以通过以下代码实现相同效果：

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 70vw;
  margin: 0 auto;
}

.item {
  flex: 1 1 calc(50% - 5px); /* 每个元素默认占一半宽度 */
  background-color: #ffa900;
  padding: 10px;
  text-align: center;
}

.item:nth-child(3n + 3) {
  flex: 1 1 100%; /* 每3个元素的最后一个占满整行 */
  background-color: #e2a7de;
}

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