如何在CSS Grid中实现每隔N行合并单元格？

完全可以用CSS Grid实现这种效果，核心是利用grid-column属性结合CSS选择器定位目标单元格，让它跨占所有列。以下是具体实现示例：

示例：每行3列，每第3行的单元格合并 #

假设我们要实现每行3个单元格，每3个元素中的最后一个（对应第3行、第6行等）跨列合并：

HTML结构 #

<div class="grid-container">
  <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 class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

CSS样式 #

.grid-container {
  display: grid;
  /* 设置每行3个等宽列 */
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
}

.grid-item {
  background: #eee;
  padding: 20px;
  text-align: center;
  border: 1px solid #ccc;
}

/* 定位每3个元素中的第3个，让它跨占所有列 */
.grid-item:nth-child(3n) {
  grid-column: 1 / -1;
  background: #ddd;
}

适配不同需求的调整规则 #

• 如果是每行4列，每隔4行合并：将选择器改为.grid-item:nth-child(4n)，同时把grid-template-columns设为repeat(4, 1fr)。
• 如果是每2行合并一次（每行3列）：目标元素是第6、12、18...个，选择器用.grid-item:nth-child(6n)即可。

注意事项 #

CSS Grid基于元素顺序布局，没有表格那样明确的行结构，所以需要根据每行的列数计算目标元素的位置。如果元素数量动态变化，要确保选择器的公式能准确匹配到需要合并的单元格。

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