CSS Grid布局中多数元素错乱堆叠在页面顶部如何排查

算力阿峰

2026-8-29

问题根源

CSS Grid布局的网格定位属性仅对网格容器的直接子元素生效，内部嵌套的孙级、重孙级元素设置grid-area、grid-row、grid-column这类属性完全无效。
你给body设置了display: grid，body是唯一的顶层网格容器，但你只给两个直接子元素（<nav>、<main>）设置了网格定位，剩下三个直接子元素（<header>、<div class="activities">、<footer>）没有设置任何网格位置属性，会被Grid的自动放置规则塞到网格最靠前的空余单元格，也就是页面顶部区域。
你写的其他网格定位规则全部命中了非直接子元素，完全不生效：

.title h1、.title h3嵌套在<header>内部，是body的孙级元素
.composition、.performance、.production嵌套在.activities内部，是body的孙级元素
#copy、#garbage嵌套在<footer>内部，是body的孙级元素

这些元素会按照普通文档流排布，跟着自己的父元素（三个没定位的直接子元素）一起堆在页面顶部，只有<main>作为直接子元素定位正确，才会出现在你预设的中部50%区域。

修复方案

最简便的改法不需要重构HTML结构，只需要补全三个顶层直接子元素的网格定位，再给这三个容器内部设置对应子网格即可：

给三个顶层直接子元素加网格定位，匹配你预设的行位置：

header {
  grid-area: 2 / 2 / 4 / 3;
  border: red solid;
}
.activities {
  grid-area: 7 / 1 / 8 / 4;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
footer {
  grid-area: 9 / 1 / 10 / 4;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}