必须设置 html 和 body 为 height: 100%; margin: 0;，否则 grid 容器无法真正占满视口，导致 1fr 失效、留白、重叠错乱等问题——这是所有 Grid 布局失效的根本原因。
直接用 height: 100vh + display: grid 就能实现真正贴满屏幕的布局，但必须同步处理 html 和 body 的高度继承问题，否则网格容器会塌缩——这是最常被忽略的根源。
为什么 height: 100% 大概率失效
浏览器默认 html 和 body 高度由内容撑开，不是视口高度。写 .grid { height: 100% } 时，它实际是“父容器高度的 100%”，而父容器（body）没显式设高，结果就是 0。
-
100vh绕过所有父级依赖，直接取当前视口高度，更可靠 - 必须同时清除
body { margin: 0 }，否则哪怕只留 8px 默认外边距，也会在底部撕开白边 - 如果页面有滚动条，
min-height: 100vh比height: 100vh更稳妥——内容超长时不会强制裁剪
grid-template-rows 用 1fr 却没铺满？
常见现象：写了 grid-template-rows: auto 1fr auto，但中间区域只占一小块，上下留大片空白。这不是 1fr 失效，而是容器本身没占满视口高度。
- 确认
.grid元素已设min-height: 100vh或height: 100vh - 检查是否有其他样式干扰，比如
align-content: start（会让所有行挤在顶部） - 避免在网格容器上设
padding，它会压缩内部可用空间，导致1fr分配的“剩余空间”变小
重叠区域要靠 grid-area 共享，不是靠 z-index 叠加
想让背景图和文字层重叠？别用 position: absolute + z-index，那会脱离网格流，响应式时极易错位。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 先定义命名区域：
grid-template-areas: "hero" - 让两个元素都设
grid-area: "hero"，它们就会自然渲染在同一格子内 - 后声明的元素默认在上层；如需控制顺序，给对应元素加
z-index（需配合position: relative） - 背景图建议用
::before伪元素承载，并设z-index: -1，避免遮挡内容且不破坏语义
移动端重叠布局必须重写 grid-template-areas
不能指望只改 grid-column 把侧边栏从右边“挪”到主内容上方——Grid 不会自动重排区域结构，只会按原定义强行定位，结果常是溢出或重叠错乱。
- 桌面端：
grid-template-areas: "header header" "main sidebar" "footer footer" - 移动端：
grid-template-areas: "header" "main" "sidebar" "footer"，再用@media切换 - 若想让
sidebar浮在main上，移动端改写为：grid-template-areas: "header" "main" "main" "footer"，然后让sidebar和main都设grid-area: "main"
真正难的不是写几行 Grid 代码，而是理解“容器是否真正占满视口”这个前提——所有后续布局都建立在这之上，漏掉 html, body { height: 100%; margin: 0; } 或误用 100%，后面全白搭。
