必须显式定义grid-template-columns（如120px 1fr）才能使grid-column生效；否则网格线不存在，label和input仅按源顺序自动流排列。
label 在 Grid 中不自动对齐到 input 左侧，除非你显式定义轨道或分配区域——否则它只是普通网格项，位置由源顺序和自动流决定。
grid-template-columns 没设，grid-column 就无效
很多人给 label 写 grid-column: 1、input 写 grid-column: 2，但页面毫无反应。原因只有一个：父容器没声明 grid-template-columns，网格线根本不存在。
- 必须写类似
grid-template-columns: 120px 1fr或grid-template-columns: fit-content(120px) 1fr，才能生成第 1 线、第 2 线、第 3 线 -
grid-auto-columns不是替代方案，它只影响隐式网格（超出模板范围的列），不能让grid-column: 1突然生效 - 调试时加
outline: 1px solid red到容器上，一眼看出有没有列被渲染出来
grid-auto-flow: column 能省掉每个 grid-column 吗
可以，但有前提：HTML 结构必须严格保持 <label></label><input> 成对顺序，且不包裹在额外 div 里。
- 容器设
grid-template-columns: 120px 1fr+grid-auto-flow: column，浏览器会把第 1、3、5… 个子项（即所有label）塞进第一列，第 2、4、6… 个（即所有input）塞进第二列 - 如果中间插了
<div class="hint">...</div>，流程就断了，后续所有项都会错位 - 跨行控件如
<textarea></textarea>需手动加grid-column: 1 / -1，否则会被当成普通input塞进第二列
justify-self: end 比 text-align: right 更可靠
在 grid 单元格里，text-align: right 经常失效——因为 justify-items（作用于整个容器）会覆盖单个单元格的文本对齐。
- 想让 label 文字右对齐，直接给
label加justify-self: end - 如果 label 宽度大于设定列宽（比如用了
minmax(100px, 200px)），文字可能溢出；此时应配合white-space: nowrap; overflow: hidden; text-overflow: ellipsis - 别用
margin-left: auto推右，它依赖 flex 行为，在 grid 里不可靠
可访问性不能因布局变弱
Grid 布局容易让人只顾视觉整齐，把 label 和 input 拆到不同区域，结果点击 label 失去聚焦能力。
- 必须保留
for/id关联：<label for="email">邮箱</label><input id="email"> - 避免用
display: contents包裹label，部分旧浏览器（如 Safari 13.1 之前）会剥离其可访问性语义 - IE11 不支持
grid-template-areas和gap，若需兼容，得回退到display: -ms-grid+ 手动线号（如-ms-grid-column: 1），且放弃auto-fit等现代特性
最易被忽略的一点：所有表单控件（尤其是 <textarea></textarea> 和带 flex 子级的包装 <div>）都得加 <code>min-width: 0，否则默认的 min-width: auto 会让它们撑破网格列，导致布局断裂。
