Grid重复网格布局排序异常求助：第5、6、7个子元素不生效

问题核心原因 #

你的Grid布局出现第5、6、7个元素不遵循规则的问题，主要来自两个点：

1. grid-auto-flow: dense的自动填充干扰：这个属性会强制网格填充前面的空白区域，导致元素脱离你预期的DOM顺序排列。比如第4个黄色元素占据两行两列后，后面的元素会被挤到前面的空白位置，直接打乱了nth-child规则对应的布局逻辑。
2. 第7个元素的规则未适配反向需求：你想要红色和绿色元素形成反向重复的对称效果，但当前第7个红色元素仅设置了跨行列的大小，没有指定列位置，无法和第1个红色元素形成对称布局。

解决方案 #

调整步骤

• 移除grid-auto-flow: dense，让元素按DOM顺序依次排列，保证nth-child规则能准确匹配每个元素的网格位置。
• 合并重复的CSS选择器（比如重复定义的9n+7规则），避免样式冲突。
• 给第7个红色元素指定列位置（grid-column: 2），让它从第二列开始，和第1个红色元素（第一列）形成反向对称。
• 保留原有跨行列规则，确保每个元素的尺寸符合预期。

修改后的代码

CSS代码

.grid{
    display: grid;
    gap: 15px; /* 合并重复的gap设置，保留一个即可 */
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 50px; /* 每行固定高度 */
}

/* 第1、7个元素：红色，跨2行1列 */
.grid > .item:nth-child(9n+1){
    grid-area: span 2 / span 1;
    background-color: red;
}
.grid > .item:nth-child(9n+7){
    grid-column: 2; /* 指定从第二列开始，实现反向对称 */
    grid-area: span 2 / span 1;
    background-color: red;
}

/* 第2、3、5、6个元素：绿色，跨1行1列 */
.grid > .item:nth-child(9n+2),
.grid > .item:nth-child(9n+3),
.grid > .item:nth-child(9n+5),
.grid > .item:nth-child(9n+6){
  grid-area: span 1 / span 1;
  background-color: green;
}

/* 第4个元素：黄色，跨2行2列 */
.grid > .item:nth-child(9n + 4) {
  grid-area: span 2 / span 2; 
  background-color: yellow;
}

/* 第8、9个元素：深蓝色，跨2行1列 */
.grid > .item:nth-child(9n+8),
.grid > .item:nth-child(9n+9) {
    background-color: deepskyblue;
    grid-area: span 2 / span 1; 
}

HTML代码（无需修改）

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

最终效果 #

修改后，9个元素会形成如下循环重复的布局：

1. 第一列红色（跨2行），右侧排列两个绿色单行元素
2. 黄色元素占据两行两列，填满中间区域
3. 第一列排列两个绿色单行元素，右侧红色（跨2行），实现反向对称
4. 最后两个深蓝色元素各占一列两行，完成一组循环

内容的提问来源于stack exchange，提问作者Svebor Sorić