应统一使用 grid-template-areas 定义固定网格结构，各步骤仅通过切换 class 改变子元素的 grid-area 分配；导航栏用 grid-auto-flow: column 实现流式对齐，表单字段须用 wrapper 包裹并显式声明区域位置，确保响应式下布局稳定。
直接用 grid-template-areas 划分步骤区、表单区、导航区，比手动算 grid-column 和 grid-row 更稳、更易维护。
为什么不能给每个步骤写一套 grid 定义
常见错误是 step1 用 grid-template-columns: 200px 1fr，step2 改成 grid-template-columns: 1fr 200px，结果 JS 切换步骤时 DOM 没变但 CSS 规则冲突，sidebar 突然错位或重叠。更糟的是媒体查询里还要重复写两套断点逻辑，一漏就崩。
- 所有步骤必须共享同一套
grid-template-areas命名结构，比如固定为"nav form"或"nav sidebar form" - 真正变化的只是哪些区域被实际渲染——没分配
grid-area的元素不占格子，也不触发重排 - JS 只需切换步骤容器的 class（如
.step-1→.step-2），CSS 用属性选择器控制各步骤下子元素的grid-area分配即可
如何让步骤导航栏横向流式对齐不溢出
横向步骤条（Step 1 → Step 2 → Step 3）在窄屏下容易换行错乱或撑破容器。别把它塞进 flex 容器再嵌进 grid，直接用 grid 自身的列流能力：
- 给导航容器设
display: grid+grid-auto-flow: column，它会自动按顺序从左到右铺开子项 - 用
gap: 1rem控制间距，justify-content: center居中对齐，比text-align或margin: auto更可靠 - 每个步骤按钮加
white-space: nowrap防止文字折行，再配合min-width: max-content保底宽度 - 小屏时用
@media (max-width: 480px)改成grid-auto-flow: row，竖向堆叠，无需改 HTML 结构
表单字段组必须包裹在同一个父容器里
Grid 的 grid-area 是作用于单个元素的，如果你把 label 和 input 拆成两个独立 div，就无法保证它们始终对齐在同一行区域里——尤其在响应式切换时极易错位。
- 每个字段必须用一个 wrapper 包住，例如
<div class="field field-name"> <label>姓名</label><input> </div> - CSS 中统一设
.field { grid-area: name; }，再通过grid-template-areas: "name-label name-input" "email-label email-input"显式声明位置 - 避免用
grid-column: span 2动态跨列，它在不同断点下行为不一致；固定命名 + 固定区域才是可预期的 - 小屏断点里把
grid-template-areas改成单列，如"name-label" "name-input" "email-label" "email-input"，结构清晰且无歧义
最易忽略的是：所有区域名必须全局唯一，且 grid-template-areas 每行引号内的空格数要和列数严格对应——多一个空格、少一个点（.）都会导致整行解析失败，浏览器静默降级为默认流式布局，而你可能根本看不出问题在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
