多步骤表单不能直接用 grid-column 手动定位字段，因存在状态隔离、校验依赖和响应式重排需求；应使用 grid-template-areas 在外层定义步骤区域，各步骤容器设 grid-area 并内部布局字段。
多步骤表单为什么不能直接用 grid-column 手动定位每个字段
因为步骤之间存在状态隔离（比如第2步字段默认不可见）、校验依赖（上一步未通过则禁用下一步）、以及响应式重排需求（手机端必须垂直堆叠），硬写 grid-column: 1 / 2 和 grid-row: 3 会导致：字段错位、隐藏后网格轨道塌陷、断点切换时区域名不匹配。真正的多步骤表单，结构上是「步骤容器」嵌套「字段组」，不是所有 input 都平级放在同一个 grid 容器里。
用 grid-template-areas 划分步骤区块，而不是单个输入框
把每个步骤抽象成一个语义区域，例如 "step1"、"step2"、"step3"，再让每个步骤内部用 flex 或子 grid 布局字段——这样步骤切换只需控制区域显隐，不破坏整体网格结构。
-
grid-template-areas写在最外层表单容器上，只定义步骤位置，不碰 label/input - 每个步骤容器（如
<section class="step" id="step-1"></section>）设grid-area: step1，并自身设display: grid处理内部字段对齐 - 空白区域用
.占位，避免某步骤隐藏后整行解析失败，例如：grid-template-areas: "step1 ." "step2 step3" - 别给步骤容器设固定高度，用
grid-auto-rows: minmax(0, auto)让它随内容伸缩
步骤内字段对齐必须用 display: contents 或统一包装容器
如果步骤内字段要左标签右输入框（如姓名、邮箱），直接让 label 和 input 作为步骤容器的子元素，会因基线/换行/宽度争夺出问题。稳妥做法只有两种：
- 给每个字段加包裹容器（如
<div class="field"> <label>邮箱</label><input> </div>），然后在步骤容器中设display: grid; grid-template-areas: "label input"; - 或用
display: contents消除包裹层（但 IE 不支持，需检查兼容性） - 所有
input必须设width: 100%且box-sizing: border-box，否则在不同列宽下溢出 -
label设display: block+margin-bottom: 0.25em，避免和 input 挤在一起
响应式切换步骤排列时，优先改 grid-template-columns 而非重写 grid-template-areas
小屏下把三步骤从横向并排改成纵向堆叠，不要在 @media 里重写一整段 grid-template-areas: "step1" "step2" "step3"——容易漏掉某个 grid-area 值或引号格式错误。更安全的方式是：
- 基础样式保持
grid-template-columns: 1fr 1fr 1fr，步骤区域按列分布 - 小屏媒体查询中只改列数：
@media (max-width: 768px) { grid-template-columns: 1fr; } - 配合
grid-auto-flow: row，让步骤自动按行填充，无需调整grid-template-areas - 若需保留部分步骤横排（如最后两个按钮“上一步/下一步”），单独提取为
.actions区域，并设grid-column: 1 / -1
真正难处理的是步骤间过渡动画和焦点管理——Grid 只管位置，不负责状态流转。字段显隐、校验反馈、键盘 Tab 顺序这些，得靠 JS 控制 aria-hidden、tabindex 和 CSS opacity/transform 配合完成，这部分容易被忽略，但用户感知最明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
