label 本身不是 Grid 容器，设 display: grid 会破坏语义、可访问性及点击聚焦逻辑；真正需设 grid 的是其父容器（如 div.form-item），使 label 与 input 作为同一网格项内子元素对齐。
label 标签本身不是 Grid 容器，直接给它设 display: grid 没有意义；真正要布局的是它的父容器（比如 div.form-item），而 label 和关联的 input 必须作为同一网格项内的子元素参与对齐。
为什么不能直接对 label 用 display: grid
因为 label 是语义化内联元素，它的默认行为是包裹文字并触发关联控件；一旦强行设为 grid，会破坏点击聚焦逻辑、可访问性（如屏幕阅读器无法识别 for/id 关联），且多数场景下你真正想控制的是 label + input 这一对的整体位置和对齐方式，不是 label 自身内部再分格。
常见错误现象：
- 给
label加display: grid后，input被挤到下一行或错位 - 点击 label 不再聚焦 input，表单交互失效
- 使用
display: contents优化 DOM 层级时，部分旧浏览器（如 IE11）会剥离label的语义，导致无障碍支持丢失
正确封装：每个 label + input 必须共用一个父容器
这个父容器才是 Grid 布局的直系子项。结构必须是：
立即学习“前端免费学习笔记（深入）”；
<div class="form-item"> <label for="email">邮箱</label> <input type="email" id="email"> </div>
而不是把所有 label 放一列、所有 input 放另一列——那样响应式时必然错行，且失去语义绑定。
关键点：
- 每个
.form-item是一个独立的 grid item，它内部的label和input可以用display: grid或flex再微调对齐（例如左对齐 label、右对齐 input） - 外层
form或.form-grid设display: grid，控制整体行列分布 - 若需 label 文字左对齐、input 右对齐，应在
.form-item内部设grid-template-columns: max-content 1fr，而非在外层统一定义列宽
响应式下 label 文字换行与截断的预防
小屏时，如果 label 文字过长又没约束，容易撑开网格或强制换行，破坏视觉节奏。这不是 Grid 的问题，而是盒模型控制不到位。
推荐做法：
- 给
label设white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（仅当宽度受限且允许省略时） - 更稳妥的方式是用
max-content配合minmax()控制列宽，例如：grid-template-columns: minmax(80px, max-content) 1fr，让 label 列有最小宽度兜底，又不无限扩张 - 避免对
label直接设固定width，否则多语言场景（如德语 label 更长）会出问题
IE11 兼容时 label 的可访问性不能妥协
IE11 不支持 grid-template-areas、gap、auto-fit 等特性，但 for/id 关联仍是刚需。降级方案中容易忽略这点：
- 不要为了“看起来整齐”而把
label和input拆到不同容器、再靠 CSS 位置重叠——这会让屏幕阅读器完全读不到关联关系 - 降级用
float或inline-block时，仍要保留for/id，并确保它们在 DOM 中靠近（哪怕视觉上分离） - 测试时用键盘 Tab 导航 + Enter 触发，确认 label 点击后 input 是否获得焦点——这是最基础的可用性验证
真正难的不是写出那行 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))，而是让每个 label 都保持语义有效、DOM 可达、焦点可及。Grid 只是排版工具，不是可访问性补丁。
