直接给 form 设 display: grid 是错的，label 和 input 会脱离语义顺序、换行错乱、可访问性受损；真正稳的做法是让每组 label/input 包裹在独立容器里，再对这个容器设 Grid。
直接给 form 设 display: grid 是错的，label 和 input 会脱离语义顺序、换行错乱、可访问性受损；真正稳的做法是让每组 label/input 包裹在独立容器里，再对这个容器设 Grid。
为什么不能直接对 form 用 display: grid
HTML 表单原生流式布局中，label 和 input 是兄弟元素，但语义上是一对。直接给 form 加 display: grid 后，浏览器会把所有子元素（包括 button、fieldset、甚至注释节点）都当作网格项处理，导致：
-
label和对应input不再天然同属一行，容易被分配到不同行或列 -
for/id关联仍在，但视觉错位会让屏幕阅读器用户困惑 - IE11 及部分旧版 Safari 对
form直接 Grid 支持极差，且无法优雅降级
正确做法：用 div.form-item 或 fieldset 包裹每对 label+input，只对这些容器设 Grid。
grid-template-columns 列宽怎么设才不溢出
固定像素（如 120px 1fr）在多语言、缩放字体或长标签下极易溢出；auto 又会让最长 label 撑开整列，破坏对齐基准。稳妥方案是：
立即学习“前端免费学习笔记（深入）”；
- 用
fit-content(120px)：label 列宽度随内容自适应，上限 120px，中英文、繁体都能撑开又不爆炸 - 或
minmax(min-content, 120px)：最小包住文字，最大卡死 120px，比fit-content更可控 - 绝对避免
grid-template-columns: auto 1fr—— 它等价于max-content，一串长词就毁掉整列对齐
示例：grid-template-columns: fit-content(120px) 1fr;
label 和 input 怎么自动分列不手动写 grid-column
手动给每个 label 写 grid-column: 1、每个 input 写 grid-column: 2 易漏难维护。更可靠的是利用 DOM 顺序 + 自动流向：
- 保持 HTML 结构为
<label>...</label><input>成对紧邻（不嵌套、不加空格文本节点） - 容器设
grid-template-columns: fit-content(120px) 1fr+grid-auto-flow: column - 浏览器会按顺序把第 1、3、5… 个子项（即所有
label）塞进第一列，第 2、4、6… 个（即所有input）塞进第二列 - 需跨行的
textarea直接加grid-column: 1 / -1，它会从 label 列起始横跨到底，不影响后续行自动对齐
place-items: center 为什么让 input 被截断
place-items: center 只控制“对齐位置”，不改变子项自身尺寸。而 input 默认有 min-width: auto，在窄网格区域里会撑破布局——尤其当父容器列宽不足时，input 会强行扩展，导致横向滚动或文字截断。
- 必须给所有表单控件（
input、select、textarea、带 flex 的包裹div）加min-width: 0和min-height: 0 -
label不要用text-align: right对齐，它在 Grid 单元格内会被justify-items覆盖；改用justify-self: end更精准 - 所有控件统一设
width: 100%，但前提是父容器有box-sizing: border-box，否则padding+border会撑出网格轨道
最易被忽略的一点：subgrid 在多行组件对齐中非常有效，但当前主流框架（如 Vue/React 组件 scoped 样式）里，父容器必须显式定义 grid-template-rows，子组件才能继承；漏掉这一步，subgrid 就退化成普通 grid。
