CSS Grid表单布局核心是先定义二维轨道结构再语义化落位，避免对齐错位与响应式断裂；应使用minmax()或fit-content()设列宽，配合grid-auto-flow: column自动分配label/input，禁用margin改用gap统一控距，并为表单控件设min-width: 0防溢出。
用 display: grid 做表单布局，核心不是“把 label 和 input 塞进格子”，而是先定义清晰的二维轨道结构，再让每个元素按语义落入对应位置——否则容易出现对齐错位、跨行混乱、响应式断裂。
grid-template-columns 怎么设才不卡死宽度
硬写 100px 1fr 看似简单，但 label 文字变长或 font-size 缩放时就会溢出。更稳的做法是用 minmax() 或命名线配合 fit-content()：
-
grid-template-columns: fit-content(120px) 1fr：label 列自动收缩到内容宽度，上限 120px，比固定值更适应多语言 -
grid-template-columns: [label-start] max-content [label-end input-start] 1fr [input-end]，再用grid-column: label-start / label-end控制 label，避免线号算错 - 别用
auto当列宽——它会按子项最大内容撑开整列，破坏对齐基准
label 和 input 怎么强制分列又不手动写 grid-column
靠显式设置每个元素的 grid-column 容易漏、难维护。推荐用 grid-auto-flow: dense + 语义化顺序 + 自动分配：
- HTML 保持
<label></label><input></input>成对顺序（不包裹） - 容器设
grid-template-columns: 120px 1fr和grid-auto-flow: column，浏览器会自动把奇数子项（label）塞第一列、偶数（input）塞第二列 - 若需跨行文本域，加
grid-column: 1 / -1，它会从 label 列起始横跨到底，且不影响后续行自动对齐
place-items: center 为什么让 input 被截断
place-items: center 只控制“对齐位置”，不压缩子项尺寸。input 默认有 min-width: auto，在窄网格区域里会撑破布局：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须给所有表单控件加
min-width: 0和min-height: 0，尤其<textarea>和带 flex 子级的<div>包裹控件 - label 不要依赖
text-align: right对齐——它在 grid 单元格内会被justify-items覆盖；改用justify-self: end更精准 - 调试时临时加
outline: 1px solid red到 input，看清它实际占位是否超出所在网格区域
gap 和 margin 混用导致间距翻倍怎么查
Grid 的 gap 是轨道间空隙，margin 是子项自身外边距。两者叠加后，视觉间距 = gap + margin，尤其在 grid-auto-flow: dense 下 margin 还可能被折叠失效：
- 删掉所有表单子项的
margin，统一用容器的row-gap和column-gap控制间距 - 如果某组需要额外留白（比如提交按钮上方），用空的
<div></div>占一行，设grid-row: auto，再通过row-gap统一调控 - 绝对不要给
<label>设margin-right——它的水平位置应由 grid 列轨道和justify-self决定
真正麻烦的不是写几行 grid 代码，而是默认行为和继承链：比如 direction: rtl 会让 justify-self: start 实际靠右，或者某个 input 加了 width: 100% 却没设 box-sizing: border-box，结果 padding 把它顶出网格区域——这些细节不盯住，对齐就永远差那么一像素。
