Grid 适合整页布局，需设 display: grid 和 min-height: 100vh，用 grid-template-areas 划分区域，main 用 1fr 占满剩余空间，避免 footer 上浮或内容溢出。
Grid 适合做整页布局，但要注意容器层级和 min-height
能，而且比 Flexbox 更适合定义“头部-主体-底部”这类明确区域划分的页面结构。关键不是能不能，而是怎么设 grid-template-areas 和怎么处理主体内容高度不足时的塌陷问题。
- 必须给根容器（如
body或包裹层）设置display: grid，并用min-height: 100vh替代height: 100vh，否则内容少时底部会上浮 -
grid-template-areas要按行写，每行用引号包裹，区域名之间用空格分隔，不能换行或加逗号 - 各区域元素需显式声明
grid-area，名字必须和模板中完全一致（包括大小写）
典型三栏式布局的 Grid 写法
以下是最简可行示例，不依赖额外 wrapper，直接作用于 body：
body {
display: grid;
grid-template-areas:
"header"
"main"
"footer";
grid-template-rows: auto 1fr auto;
min-height: 100vh;
margin: 0;
}
header { grid-area: header; background: #eee; padding: 1rem; }
main { grid-area: main; padding: 1rem; }
footer { grid-area: footer; background: #ddd; padding: 0.5rem; text-align: center; }
注意：1fr 是让 main 占满剩余空间的核心；如果用 auto 或固定值，主体就不会撑开。
常见错误：footer 粘不住底或内容溢出
两种高频问题都和高度计算有关：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 没设
min-height: 100vh→ 页面内容少时，grid容器高度只够包裹内容，footer就会卡在主体下方，不贴底 - 在
main里嵌套了另一个display: grid或flex，但没给它设height: 100%或min-height: 0→ 内容多时溢出，滚动条出在main内部而非整个页面 - 用了
html { height: 100% }却漏了body { height: 100% }→ Grid 容器没高度来源，1fr失效
与 Flexbox 布局的关键区别点
Grid 在这里的优势不是“更炫”，而是语义更稳、控制粒度更细：
- Flexbox 的
flex-direction: column+flex: 1主体也能实现类似效果，但当需要“侧边栏+主内容+底部”三列+三行混合时，Grid 的grid-template-areas可读性远高于嵌套 Flex - Grid 支持跨区域（
grid-column: 1 / -1）、隐式轨道、响应式重排（@media中改grid-template-areas），Flex 没有原生区域概念 - 兼容性上，现代浏览器（Chrome 57+/Firefox 52+/Safari 10.1+）已无顾虑；IE11 需用
-ms-grid前缀，但区域名语法不支持，得退回到线性轨道写法
真正容易被忽略的是：Grid 布局中，main 区域的子元素如果用了 position: absolute，它的定位参考是 main 自身 —— 而不是视口，这点和 Flex 不同，但常被误判。
