grid-template-rows: 1fr auto 实现页脚底部对齐的前提是容器具备明确高度（如 min-height: 100vh），且子元素顺序与行定义匹配；若仅两行却含三个子元素，footer会落入隐式网格行而失效，正确做法是用 auto 1fr auto 或包裹结构确保行数一致。
直接说结论：用 grid-template-rows: 1fr auto 实现页脚底部对齐，前提是容器高度至少撑满视口（min-height: 100vh），且父容器是 Grid 容器、子元素正确分配了 grid-row 或默认流顺序。
为什么 1fr auto 看似简单却常失效
很多人写了 grid-template-rows: 1fr auto，但页脚还是卡在内容下方、没贴底——根本原因是容器本身没“够高”。Grid 的 1fr 是按可用空间分配的，如果整个容器只有内容那么高，1fr 就分到 0px，auto 行自然紧贴内容后出现。
- 必须给 grid 容器设置
min-height: 100vh（不是height: 100vh，否则短内容会强制撑满全屏，可能造成多余滚动） - 确保没有其他 CSS（比如
margin-collapse或未重置的body margin）压缩了容器实际高度 - 页脚元素不能被设成
align-self: start或其他覆盖默认对齐的行为
grid-template-rows: 1fr auto 的典型结构写法
假设页面结构是 <header></header>、<main></main>、<footer></footer> 三层，不需要额外指定 grid-row，靠源码顺序即可：
body {
display: grid;
min-height: 100vh;
grid-template-rows: 1fr auto;
}
<p>header { /<em> 默认占第一行 </em>/ }
main { /<em> 默认占第二行，即 1fr 那行 </em>/ }
footer { /<em> 默认占第三行？错 —— 这里会出问题 </em>/ }
</p>
⚠️ 注意：上面写法其实有陷阱。三个子元素会按顺序自动填入三行，但 grid-template-rows: 1fr auto 只定义了两行。结果是 footer 被挤到隐式网格行，失去控制。
- 正确做法：显式限定只让
main占1fr，header和footer各占一行（用auto或固定值），例如：grid-template-rows: auto 1fr auto - 或者，把
header和main包进一个区域，再用1fr auto分配该区域内部高度（适合 header 固定高场景） - 更稳妥的常见模式：
grid-template-rows: auto 1fr auto+grid-template-areas: "head" "main" "foot"，配合header { grid-area: head; }等
和 Flexbox 对比：什么情况下别硬套 Grid
如果只是单列垂直布局+页脚贴底，Flexbox 往往更轻量、容错更强：
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main { flex: 1; } /* 等价于 1fr */
footer { align-self: flex-end; } /* 可选，通常不需要 */
- Flexbox 对子项数量不敏感，不用操心“几行”定义是否匹配子元素数
- Grid 在这里优势在于：需要同时做横向分区（比如 sidebar + main）时，才能真正发挥二维能力；纯纵向贴底，Grid 属于“能用，但多了一层约束”
- 老版本 Safari 对
1fr在某些嵌套场景下有渲染 bug（如 grid 内再套 grid），Flex 更稳
真正容易被忽略的是：页脚贴底不是单纯靠某一行设为 auto 就完事，而是整个高度链要闭合——从 html、body 到 grid 容器，每层都得确认是否意外截断了高度继承。经常卡住的地方不在 Grid 语法本身，而在 body { margin: 0 } 没加，或 html 缺少 height: 100%（尤其在某些嵌套布局中）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
