最稳定方案是用 grid-template-areas 语义化划分 header/stepper/form/footer 四区，断点切换排列；stepper 用 grid-auto-flow: column；进度条用 CSS 变量 + calc() 动态计算，配合 data-step 属性控制状态。
用 grid-template-areas 统一管理步骤导航与表单区域
直接给每个步骤写一套 grid-template-columns + grid-template-rows 是最常见也最危险的做法——一旦某步 DOM 结构微调（比如加了个提示文案容器），媒体查询就可能失效，小屏下整个布局错位。真正稳定的方案是语义化区域划分：grid-template-areas 定义 header / stepper / form / footer 四个逻辑区，所有步骤共享同一套区域名，仅在断点中切换排列方式。
例如大屏下保持横向流程："header header" "stepper form" "footer footer"；小屏则压缩为垂直流："header" "stepper" "form" "footer"。注意：sidebar 或 stepper 在小屏未被分配到任何 grid-area 时，会自然不渲染，无需 JS 控制 display: none，避免状态同步问题。
grid-auto-flow: column 驱动横向步骤条，防换行错位
把步骤项塞进 flex 再放进 grid 容器，看似省事，实则埋雷：flex 的换行行为和 grid 的轨道计算冲突，小屏下容易出现步骤项突然跳到第二行、连线断裂、圆点偏移。正确做法是让 stepper 容器本身启用列式自动流：display: grid; grid-auto-flow: column; gap: 1rem;。这样每步宽度由内容决定，但整体保持单行流动；配合 justify-content: center 居中对齐，再用 minmax(120px, 1fr) 做最小宽度兜底，就能兼顾文字长度差异与响应式收缩。
关键点：grid-column: auto 让每个步骤项自动占位，不手动指定 grid-column-start，否则新增步骤要改 CSS。
用 data-step + CSS 变量驱动进度条宽度，避开内联 style
CSS 无法读取 JS 当前步数，硬写 width: 33.3% 会卡死在 3 步逻辑里。必须靠 JS 注入自定义属性，再用 calc() 动态算：.progress { width: calc((var(--active-step, 1) - 1) / (var(--total-steps, 4) - 1) * 100%); }。JS 更新时只调用：progressEl.style.setProperty('--active-step', currentStep) 和 progressEl.style.setProperty('--total-steps', totalSteps)。
容易踩的坑：
- 分母为 0：当
--total-steps是 1 时，calc会失效，JS 必须确保至少设为 2 - 过渡失效：别忘了加
transition: width 0.3s ease，否则进度跳变生硬 - 伪元素连线错位：进度条和步骤圆点若用不同单位（如 rem vs px）定位，缩放时易脱节，统一用
em或ch更稳
步骤激活状态靠属性选择器控制，不用 class 切换
给当前步骤加 class="active" 看似直观，但多步骤表单中，JS 要反复 remove/add，容易漏掉或冲突。更干净的方式是统一用 data-step="3" 标记当前步，再用属性选择器：[data-step="3"] .step-circle 控制颜色，[data-step="3"] ~ .step-circle 控制后续步骤灰度。
连线处理也同理：非首项用 .step:not(:first-child)::before 画线，但必须配 position: absolute; top: 50%; transform: translateY(-50%) 垂直居中，且 left: -50%; width: 100% 才能精准覆盖上一节点中心到当前节点中心。用 background-color 代替 border，避免盒模型干扰宽度计算。
复杂点在于步骤内容区高度不一致时，grid 行高会随最高项拉伸，导致进度条视觉错位。别用 align-items: start 粗暴截断，应给 form 区域设 min-height + overflow-y: auto，让内容可滚动而非撑开布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
