根本原因是行高未统一，label与input高度计算机制不同导致行被拉高；需显式定义grid-template-rows或配合align-items: center，避免依赖grid-auto-rows。
grid-template-columns 固定标签列宽后，为什么输入框还是歪的
根本原因不是标签没对齐，而是行高没统一下来。浏览器默认用 grid-auto-rows: auto，导致 label 高度靠文字撑开，input 高度靠 padding+border+line-height 决定，两者不一致时，整行会被拉高，下一行的 label 就“掉下去”了。
必须显式定义行轨道，不能依赖隐式行：
-
grid-template-rows: repeat(4, minmax(40px, auto))—— 4 是预估最大字段数，minmax(40px, auto)保证每行至少 40px，内容多时可略高，但不会挤压其他行 - 避免写
grid-auto-rows: minmax(40px, auto)+grid-template-columns混搭，隐式行不受minmax约束，容易漏控 - 如果字段数量不确定，改用
grid-auto-rows: minmax(40px, auto)，但必须配合align-items: center强制单行内垂直居中
label 和 input 分开放还是包一起用 grid-area
分开放更可靠。把 label 和 input 当作独立网格项，直接用 grid-column 控制列位置，能绕过语义包裹（比如 div 或 fieldset）引入的隐式网格项干扰。
别给每个 label/input 单独起 grid-area 名——批量布局时太重，维护成本高：
.form-grid > label { grid-column: 1; align-self: center; }.form-grid > input { grid-column: 2; padding: 8px; box-sizing: border-box; }- 若需右对齐标签（适配长文本），用
justify-self: end，不是text-align: right，后者会扩大 label 的占据宽度，破坏列宽计算 - 加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis防止 label 换行错位
响应式切换单列时，grid-column 定位失效怎么办
媒体查询里只改 grid-template-columns 不够，grid-column 值仍指向原列号，小屏下两列变一列，label 和 input 会叠在一起。
必须同步重置列定位规则：
- 小屏下设
@media (max-width: 768px) { .form-grid { grid-template-columns: 1fr; } } - 同时覆盖定位：
.form-grid > label, .form-grid > input { grid-column: 1; } - 若需 label 在上、input 在下，再加
grid-row: auto让它们自然流式排列，不用手动写grid-row: 1 / 2这类硬编码 - 注意 gap 在小屏下可能显得过大，建议用
gap: 6px替代桌面端的8px
冒号要不要单独一列？用 max-content 还是固定 px
要单独一列，但别用 max-content——它会让最宽 label 决定整列宽度，短 label 旁边空一大片，视觉松散。固定像素（如 120px）或 minmax(100px, 140px) 更可控。
冒号列用 auto 或 fit-content(1em) 即可，关键在对齐方式：
- 结构上：HTML 里把冒号写进 label，或用伪元素
::after { content: ":"; }，避免额外 DOM 节点 - CSS 中：给 label 加
justify-self: end，冒号自然贴右；若用独立span.colon，则设justify-self: center，并限制宽度防拉伸 - 不要指望
text-align拉齐冒号——它只影响内容盒，不参与网格轨道分配
line-height 和 font-metrics 对 minmax() 行高的隐式影响。这时候得关掉所有外部样式，先用纯系统字体和默认 line-height 测 baseline，再一层层加回来。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
