校验提示与input错位因未显式设置grid-column；提示被挤窄需设min-width:0；响应式下须重置grid-column；多提示共存应以grid-row排序。
校验提示和 input 不在同一行？检查 grid-column 是否写错列号
常见现象是 input 在第 2 列，但错误提示（如 .error）没紧贴它下方，反而跑到第一列或换行错位。根本原因是没显式声明提示元素的列位置，浏览器按文档流默认塞进下一格，或受 grid-auto-flow 影响乱序。
必须给提示元素设 grid-column，且值要和 input 一致：
.field input { grid-column: 2; }-
.field .error { grid-column: 2; }—— 不是1，也不是空着不写 - 若用命名区域，
.error也得设grid-area: "input"或同名区域，不能只靠grid-row
提示文字被 input 挤窄或换行？别让 min-width 干扰布局
错误提示常含动态文本（如“密码至少8位”），长度不可控。若 input 所在列用 1fr，而 .error 又没设 min-width: 0，它的内容会强行撑宽整列，导致 input 缩窄、圆角变形，甚至在 Safari 中文字截断。
关键控制点：
立即学习“前端免费学习笔记（深入）”；
.error { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }- 避免对
.error设width或flex相关属性——它不是 flex 容器 - 如果提示需多行展示，改用
white-space: normal+max-width: 100%，但必须配grid-row: auto让它自动占行
响应式下提示叠在 input 上？媒体查询里必须重置 grid-column
小屏切单列时，仅把 grid-template-columns 改成 1fr 不够：input 还在第 2 列，.error 也在第 2 列，两者物理重叠，视觉上只剩一个。
必须同步覆盖定位规则：
- @media (max-width: 600px) {
.field { grid-template-columns: 1fr; }
.field input, .field .error { grid-column: 1; }
} - 若提示需显示在 input 下方，加
grid-row: auto或显式写grid-row: 2 / 3，确保它不和 input 共享同一行轨道 - 别依赖
gap隔开它们——单列下gap是行间距，但前提是它们不在同一行
多个提示共存时顺序错乱？用 grid-row 显式控制堆叠顺序
一个字段可能同时有“必填”“格式错误”“远程校验中”三种状态，靠 DOM 顺序渲染容易被 CSS 选择器覆盖或顺序颠倒。Grid 不保证子项顺序就是 DOM 顺序，尤其当部分提示被 display: none 切换时。
稳妥做法是用 grid-row 锁定层级：
.error { grid-row: 3; }.hint { grid-row: 4; }.loading { grid-row: 2; }- 所有提示都设
grid-column: 2，再靠grid-row排序，比用z-index更可靠 - 注意：数值必须是真实存在的行线号；若未定义
grid-template-rows，浏览器会生成隐式行，但行为不稳定，建议补grid-auto-rows: minmax(24px, auto)
.error 看似只是个提示，但它一旦参与网格定位，就和 label、input 处于同一套行高计算体系里，漏掉 grid-row 或 grid-auto-rows，整行基线就会漂移。 
