CSS Grid响应式重排时出现莫名空白区域的问题排查

核心问题原因 #

• Order属性冲突：你给.p2和.img1都设置了order:2，导致这两个元素优先级相同，按DOM顺序排列后打乱了交替布局的逻辑，同时引发网格轨道的异常分配。
• 容器高度限制未解除：桌面端.content设置了固定height:1000px，移动端仅添加max-height:2600px但未覆盖固定height，容器高度仍被锁死在1000px。而移动端网格每行仅200px（1000px/5行），远小于你设置的元素高度（300px），元素垂直居中后超出网格行，进而在容器内产生空白。
• 网格行数量不匹配：你共有6个内容元素，但移动端网格仅定义了5行，网格自动新增的第6行受限于容器高度被压缩，加剧了布局错乱。

修复步骤 #

1. 修正Order顺序：调整各元素的order值，确保段落与图片交替排列：

@media (max-width: 965px) {
  .p1 { order: 1; }
  .img1 { order: 2; }
  .p2 { order: 3; }
  .img2 { order: 4; }
  .p3 { order: 5; }
  .img3 { order: 6; }
}

2. 解除容器固定高度限制：移动端将.content的固定height改为自适应，同时匹配元素数量设置网格行数：

@media (max-width: 965px) {
  .content {
    height: auto; /* 移除固定高度，让容器自适应内容 */
    max-height: 2600px;
    grid-template: repeat(6, auto)/1fr; /* 设置6行，每行高度随内容自适应 */
    /* 其他属性保持不变 */
  }
}

3. 可选：统一行间距：如果需要保持行间距，可在移动端明确设置（继承桌面端值或自行调整）：

@media (max-width: 965px) {
  .content {
    row-gap: 4em;
  }
}

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