用 display: grid 优化表单可减少2–3层DOM节点，提升语义与响应式控制；label/input直属form，通过命名轨道对齐，避免冗余包裹和子网格滥用，兼顾可访问性与性能。
直接用 display: grid 替代表单里层层包裹的 <div class="row"><div class="col">，能砍掉 2–3 层 DOM 节点，且语义更清晰、响应式更可控。
<h3>用 <code>grid-template-columns 替代 label/input 分组容器
传统写法常为每个表单项加一层 <div class="form-group">，再包 <code><label></label> 和 <input>——这纯属冗余。Grid 可让 <label></label> 和 <input> 成为 <form></form> 的直系子元素，靠列轨道对齐。
-
<form class="form-grid"></form>设display: grid+grid-template-columns: [label] 120px [input] 1fr -
<label></label>加grid-column: label，<input>加grid-column: input - 避免写
grid-area: label / input / label / input这类重复定位，用命名轨道一次定义，复用更稳 - 若 label 宽度不固定，改用
grid-template-columns: max-content 1fr，但需注意max-content在长文本下可能撑宽整列
避免在表单项内部再套 display: grid
常见错误：给某个 <div class="date-range"> 再设 <code>display: grid 来排两个日期输入框。这等于把嵌套从 HTML 搬进 CSS，DOM 层级没减，反而增加样式计算负担。
- 优先让整个
<form></form>统一控制布局节奏，用grid-column: span 2让复合控件跨列即可 - 真需内部对齐（如按钮组），改用
display: flex—— Flex 更轻量，且不干扰外层 Grid 的轨道定义 - 若必须用子网格，确保父项显式设
height或min-height，否则grid-template-rows: auto会让该区域高度不可控，破坏整体行高一致性
响应式断点直接切 grid-template-columns，别删 DOM
移动端常想“把 label 和 input 叠成一列”，有人会用 JS 动态删掉 <label></label> 或插入 wrapper。这是错的——语义断裂、可访问性受损，且 DOM 操作触发重排。
立即学习“前端免费学习笔记（深入）”；
- 用
@media (max-width: 768px)改grid-template-columns: 1fr，同时设grid-row: 1 / -1让 label 占满整行，再用grid-row: 2控制 input 位置 - 不要依赖
grid-template-areas做响应式切换，它在 >50 个字段时解析开销明显；数值定位（grid-column: 1 / -1）更高效 - 所有
<label></label>必须带for属性并正确指向id，否则屏幕阅读器无法关联——Grid 再扁平，也不能牺牲这个
最易被忽略的是：Grid 优化的前提是表单结构本身语义正确。<fieldset></fieldset> 和 <legend></legend> 不能为了“扁平”而删，它们提供逻辑分组和无障碍支持；真正该砍的，是那些只为了 float 清除或 margin 对齐而存在的空 <div>。</div>
