CSS Grid网格项空间充足却无法适配问题求助

你的问题核心是第十个模块（.ten）未设置正确的网格行位置，且后半部分的.eight、.nine也缺少行定义，导致无法和前半部分对称。以下是修正后的代码：

修正后的CSS #

.wrapper { 
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 5px;
}

.wrapper > div { 
  background-color: rgba(233 171 88 / 0.5); 
  color: #d9480f; 
  aspect-ratio: 1 / 1; 
  border:1px solid black; 
}

/* 前五个模块（保留原有正确布局） */
.one { grid-row: auto / span 6 }
.three { grid-row: 7 / span 6 }
.one, .three { grid-column: auto / span 6; }
.two { grid-column: auto / span 8; grid-row: auto / span 8 }
.four, .five { grid-row: 9 / span 4; grid-column: auto / span 4 }

/* 后五个模块（修正对称布局） */
.six { grid-column: auto / span 8; grid-row: auto / span 8; }
.seven { grid-row: auto / span 6; }
/* 给.ten设置对应.three的行位置 */
.ten { grid-row: 7 / span 6; }
.seven, .ten { grid-column: 9 / span 6; }
/* 给.eight、.nine添加行定义，对应.four、.five */
.eight, .nine { grid-row: 9 / span 4; }
.eight { grid-column: 1 / span 4 }
.nine { grid-column: 5 / span 4 }

关键修正说明 #

1. .ten的行定位：设置grid-row:7/span6，和前半部分.three的行范围完全匹配，确保右侧下方的大模块和左侧对称。
2. 补齐.eight、.nine的行规则：添加grid-row:9/span4，让底部两个小模块和前半部分的.four、.five处于同一行范围，完成底部对称。
3. 列规则保持镜像：前半部分.one、.three占左侧6列，后半部分.seven、.ten占右侧6列；前半部分.two占右侧8列，后半部分.six占左侧8列，完全实现左右对称。

修改后十个模块就能完美适配网格，实现预期的对称布局。

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