Grid布局区域未生效，所有元素置顶问题求助

核心原因 #

你的.page-wrapper仅定义了列轨道（column tracks），但未设置合理的行轨道（row tracks）规则，所有子元素默认被挤在第一行的网格单元格中，因此全部堆在页面顶部。自定义元素的display: block设置是正确的，但并非问题的核心。

具体修复步骤 #

1. 为.page-wrapper配置完整的圣杯Grid布局规则，补充行轨道与网格区域定义：

.page-wrapper {
  display: grid;
  /* 列轨道：左侧边栏 + 自适应主内容 + 右侧边栏 */
  grid-template-columns: 200px 1fr 200px;
  /* 行轨道：头部自适应高度 + 主内容占满剩余空间 + 底部自适应高度 */
  grid-template-rows: auto 1fr auto;
  /* 绑定网格区域，对应圣杯布局的垂直结构 */
  grid-template-areas:
    "header header header"
    "left-sidebar main right-sidebar"
    "footer footer footer";
  /* 让容器占满视口高度，确保中间区域能拉伸 */
  min-height: 100vh;
}

2. 给各个子元素分配对应的网格区域：

header {
  grid-area: header;
}
left-sidebar {
  grid-area: left-sidebar;
  display: block; /* 确保自定义元素以块级参与布局 */
}
main {
  grid-area: main;
  /* 保留原有的宽度限制，不影响Grid布局 */
  width: min(65ch, 100% - 4rem);
  margin: 0 auto; /* 让主内容在网格单元格内水平居中 */
}
right-sidebar {
  grid-area: right-sidebar;
  display: block;
}
footer {
  grid-area: footer;
}

3. 消除默认样式干扰：
   给body添加基础样式，避免默认边距导致布局偏移：

body {
  margin: 0;
  min-height: 100vh;
}

额外说明 #

• 圣杯布局的核心是通过grid-template-rows: auto 1fr auto，让中间的主内容行自动占满容器剩余的垂直空间，头部和底部则根据自身内容自适应高度。
• 自定义元素必须设置display: block才能正确纳入Grid布局体系，你之前的这个操作是正确的，只是缺少Grid行轨道的配合才没解决问题。

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