能，而且比 Flexbox 更稳——关键在 min-height: 100vh 和 1fr 的组合用法；body 用 grid-template-areas 划分三区域，grid-template-rows 设为 auto 1fr auto，main 占剩余空间顶住 footer，需确保 min-height: 100vh、margin: 0 及媒体查询中列行定义完整。
能，而且比 Flexbox 更稳——关键在 min-height: 100vh 和 1fr 的组合用法，不是单纯设 height: 100vh。
为什么 footer 会飘在半空或压不住底
这是最常遇到的现象：内容少时 footer 浮在页面中部，或者内容多时 main 溢出、滚动条卡在内部。根本原因是 Grid 容器没拿到“足够高”的计算基准。
-
height: 100vh只让容器“刚好”撑满视口，但一旦子元素没填满，1fr就没空间可分，footer 自然上浮 - 漏设
min-height: 100vh（注意是min-，不是height）→ 容器高度由内容决定，1fr失效 - 父级（如
html）没设height: 100%，而你又在子层用100vh→ 视口高度计算链断裂 -
main里嵌了另一个display: grid或flex，但没给它加min-height: 0或height: 100%→ 内部溢出不触发外层滚动
最简可行的三段式 Grid 布局写法
直接作用于 body，不套额外 wrapper，避免层级干扰：
body {
display: grid;
grid-template-areas: "header" "main" "footer";
grid-template-rows: auto 1fr auto;
min-height: 100vh;
margin: 0;
}
header { grid-area: header; }
main { grid-area: main; }
footer { grid-area: footer; }
-
grid-template-areas必须每行用引号包裹，区域名之间只用空格，不能换行、不能加逗号 -
1fr是核心：它让main吃掉所有剩余空间，把footer“顶” 到底部 - 如果改用
auto或固定值（如500px），main就不会伸缩，塌陷问题重现 -
margin: 0必加，否则body默认边距会破坏高度计算
响应式切换：移动端单列 vs PC 端带侧边栏
当需要加侧边栏时，grid-template-areas 的语义优势立刻体现——改模板就行，不用动 HTML。
@media (min-width: 768px) {
body {
grid-template-areas: "header header" "sidebar main" "footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
}
aside { grid-area: sidebar; }
}
- 移动端保持单列（
"header" "main" "footer"），PC 端切为两列，sidebar固定宽，main弹性占满 - 区域名大小写必须完全一致：
grid-area: sidebar对应"sidebar main"，错一个字母就失效 - 别在
@media里只改grid-template-areas而漏掉grid-template-columns—— 否则新区域没列轨道可落
真正容易被忽略的点是：Grid 区域命名不是“起个名字就行”，而是整套高度计算链里的齿轮。少一个 min-height、错一个引号格式、漏一个 grid-area 声明，整个布局就会静默失效——它不会报错，只会看起来“不太对”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
