css grid 实现主从结构分步引导页最自然：固定侧栏+自适应主区，用 grid-template-columns: 240px 1fr 和 grid-template-areas 命名区域；主区需 min-height: 0 + minmax(0, 1fr) + overflow-y: auto 才可控滚动；响应式改用垂直堆叠布局。
主从结构分步引导页（比如安装向导、表单多步流程、产品功能介绍页）用 CSS Grid 实现最自然——它天然支持“主内容区 + 侧边步骤导航”的二维划分，且无需 JavaScript 就能控制区域显隐与顺序切换。
设置 display: grid 并定义基础行列轨道
主从结构本质是“固定宽度的侧栏 + 自适应主内容”，不是靠 float 或绝对定位硬塞。必须先让容器成为网格容器，再用 grid-template-columns 明确分离两部分：
-
grid-template-columns: 240px 1fr是最常用组合：左侧 240px 固定放步骤条，右侧用1fr吃满剩余空间 - 避免写成
grid-template-columns: 240px auto——auto会让主区收缩到内容最小宽，导致文字换行或按钮错位 - 如果需要顶部标题栏或底部操作栏，加
grid-template-rows，例如60px 1fr 80px
用 grid-template-areas 命名区域提升可维护性
比起纯数字线号（如 grid-column: 1 / 2），命名区域让 HTML 和 CSS 的意图一目了然，尤其当后续要加“跳过”“返回”按钮或状态徽章时更不容易出错：
- 容器上写
grid-template-areas: "sidebar main" "footer footer"，注意每行引号内列数必须和grid-template-columns轨道数一致（这里是 2 列） - 侧边栏元素设
grid-area: sidebar，主内容区设grid-area: main，footer 设grid-area: footer - 别漏掉引号：
grid-area: sidebar（无引号）会失效；正确写法是grid-area: "sidebar"
让主内容区支持滚动且不撑开容器高度
这是最容易卡住的地方：步骤内容变长后，整个页面被拉长，侧边栏无法对齐，footer 也飘走了。关键不是给 main 加 overflow-y: auto 就完事：
- 父容器（即 grid 容器）必须有明确高度约束，比如
min-height: 100vh或height: 100%（前提是其父级也有高度） -
main区域的行高不能只写1fr，得用minmax(0, 1fr)，否则它会优先扩展自身而不是滚动 -
main元素本身需加min-height: 0—— 这是断开 grid 隐式高度继承链的必要动作 - 最后才加
overflow-y: auto，并确保内边距、字体大小等不意外触发最小高度膨胀
响应式切换为垂直堆叠布局
小屏下侧边栏放顶部或底部更合理，但别用 flex-direction: column 混搭 Grid——直接重定义整个网格结构更干净：
- 媒体查询里覆盖
grid-template-areas，例如移动端改成"header" "steps" "main" "footer" - 同步改
grid-template-columns: 1fr和grid-template-rows: auto auto 1fr auto - 步骤条（
steps）此时可设grid-area: steps，不再叫sidebar，语义更准 - 别在同一个
grid-template-areas字符串里混用不同断点的列数，浏览器会静默忽略整条规则
真正难的不是写出第一版 Grid 布局，而是当产品经理说“第三步加个悬浮提示框”“步骤条要支持横向滚动”“主区顶部固定一个进度条”时，你能否快速判断该动哪条规则、哪层嵌套、哪个 minmax 边界——这些细节才是 Grid 主从结构落地时反复被验证的锚点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
