应避免直接对form设display: grid，而应将每组label/input用div包裹后设grid，或用grid-template-areas实现多区域对齐，同时确保for/id关联、可访问性及IE11降级兼容。
表单元素直接用 display: grid 会错乱
HTML 表单默认是流式布局，input、label、button 等天然具有内联或块级行为，直接给 form 加 display: grid 很容易让控件换行异常、对齐失效，甚至 label 和 input 脱离语义关联。
真正可控的做法是：只对「表单项容器」（比如每组 label + input）设 display: grid，或者用 grid 布局整个表单结构，但把每个字段包装成独立单元。
- 别给
form直接设grid-template-columns，除非你明确控制所有子元素为grid-item - 推荐用
div包裹每对label/input，再让这些div成为grid的直系子项 -
fieldset可以作为逻辑分组容器，它本身支持display: grid，且不影响语义和可访问性
grid-template-areas 适合多字段对齐场景
当表单有标题、描述、输入框、错误提示多个区域时，grid-template-areas 比纯列宽计算更直观、易维护。比如邮箱字段需要左侧标签、中间输入框、右侧校验图标、下方错误消息——用命名区域一目了然。
注意：每个区域名必须用引号包裹，且同一行的区域名在同一对引号内，换行靠多个字符串实现。
立即学习“前端免费学习笔记（深入）”；
form {
display: grid;
grid-template-areas:
"label input icon"
"error error error";
}
-
label元素需加grid-area: label，input加grid-area: input，否则区域不生效 - 空区域用
.占位，避免语法错误；但不要为了填满而硬凑，留白比错位强 - 响应式时建议用
@media重定义grid-template-areas，而不是改列数——区域名不变，布局逻辑更清晰
label 和 input 的显式关联不能丢
用 CSS Grid 排版时，很容易为了视觉整齐把 label 和 input 拆到不同网格区域，结果导致点击 label 不聚焦 input，破坏可访问性和基础交互。
必须确保两者仍通过 for/id 或嵌套方式保持 WAI-ARIA 合规性。
- 坚持给
input设唯一id，label用for="xxx" - 避免仅靠视觉位置暗示关联，屏幕阅读器不读 CSS 网格坐标
- 如果用
display: contents优化 DOM 层级，要确认它不剥离label的可访问性语义（部分旧浏览器不支持）
IE11 不支持 grid，但表单往往要兼容
哪怕项目声明“不支持 IE”，很多政务、银行类表单仍被要求在 IE11 下可用。而 IE11 对 display: grid 的支持仅限于旧语法（display: -ms-grid），且不支持 grid-template-areas、gap、auto-fit 等关键特性。
真要兼容，得准备降级方案，而不是寄希望于 Autoprefixer。
- 用
@supports (display: grid)包裹 Grid 样式，里面写现代布局 - 外面写 Flex 或 float 布局作为 fallback，尤其注意
label宽度、input自适应行为差异 - 避免在 Grid 中依赖
minmax()或fr单位做关键尺寸控制，IE11 解析不了，会退成auto导致溢出
Grid 让表单布局更灵活，但灵活性的前提是没动歪脑筋去绕过语义、可访问性或兼容底线——那些地方一松手，调试起来比写三遍 float 还费劲。
