grid布局实现局部滚动与固定区域共存，关键在于父容器设min-height:100vh、固定区域用grid轨道定位、滚动区为直系子元素并设overflow-y:auto+高度约束，同时清除body默认margin等干扰。
Grid 布局实现局部滚动与固定区域共存，关键在于明确高度来源、隔离滚动上下文、合理分配轨道，并避免渲染干扰。它不是靠 position: sticky 或 overflow: hidden 堆砌，而是用 Grid 的结构能力天然分离行为。
父容器必须有可计算的高度
Grid 轨道（尤其是 1fr）不会凭空产生空间。如果 html 和 body 没设 height: 100%，Grid 容器又没写 min-height: 100vh，那么 grid-template-rows 中的 1fr 就塌成内容高度，滚动自然失效。
- html, body { height: 100%; } 是基础前提
- Grid 容器（如 .layout）推荐设 min-height: 100vh，而非 height: 100%，防止嵌套时继承中断
- 移动端可用 100dvh 替代 100vh，或用 calc(100vh - 导航高度) 更稳妥
固定区域靠列/行轨道定位，不依赖 sticky
侧边栏、顶部导航、底部工具栏这类固定区域，应直接放在独立的网格轨道中，由 grid-template-columns / grid-template-rows 分配位置。它们天然“不动”，不需要 position: sticky 或 fixed。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 例如：grid-template-rows: 60px 1fr 50px; —— header 和 footer 占固定行高，main 自占剩余空间
- grid-template-columns: 240px 1fr; —— 侧边栏宽度锁定，主内容自适应，列轨道本身已固定
- 切忌给固定区域加 overflow 或 position: sticky，会破坏 Grid 的布局逻辑
滚动仅作用于指定直系子元素
只有被设为 Grid 直系子元素的内容区，才能独立滚动。滚动行为不能套在 div 里再塞进 Grid，也不能靠内部嵌套的 Flex/Grid 触发。
- 主内容区（如
）需同时满足：overflow-y: auto + 明确高度约束（如 height: 100% 或 max-height: 100vh） - 若该区域内部还嵌套了 Grid/Flex，必须给它加 min-height: 0，否则浏览器默认最小尺寸会撑满容器，导致滚动条不出现
- 表头/行头等固定部分，应和主体滚动区同级，同为 Grid 直系子项，再配合 position: sticky 实现锚定（注意：sticky 需滚动祖先有 overflow:hidden）
避免常见干扰项
很多滚动失效其实和 Grid 写法无关，而是被隐含样式拖累。
- 清除 body 默认 margin：body { margin: 0; }
- 禁用全局 box-sizing: border-box 不够，每个参与布局的元素最好都显式声明
- 横向滚动要靠内容自然撑宽，不能只靠 grid-template-columns；需确保内部内容总宽度 > 容器宽度，且容器设 overflow-x: auto
- 用 DevTools 的 Computed 面板检查 grid-row / grid-column 是否生效，若显示 auto，说明轨道未被正确分配
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
