grid-template-areas必须写在父容器上且display: grid不可遗漏；区域名须逐字符匹配、用.占位；响应式需同步更新模板与area值；JS动态插入元素须手动设置gridArea。
grid-template-areas 必须写在父容器上，且 display: grid 不能漏
表单布局失效最常见原因：只给子元素加 grid-area，却忘了给包裹它的 <form> 或 <div class="form-grid"> 设 display: grid。浏览器不会报错，但整套命名区域逻辑直接被忽略。
必须确保：
- 父容器显式声明
display: grid -
grid-template-areas写在同一个父容器 CSS 规则里（不能写在子元素或全局类中） - 每行引号内区域名数量一致，比如三列布局就每行都写三个词：
"label input action"、"label input ."、"label input action"，不能某行少一个 - 空白格子必须用
.占位，不能留空字符串或空格
grid-area 值必须和 grid-template-areas 字符串逐字符匹配
表单字段“跑偏”或“消失”，90% 是拼写不一致。比如你在模板里写的是 "label input action"，那对应元素的 grid-area 就只能是 label、input、action —— 多一个空格、大小写不同、加引号、含下划线，全都不生效。
典型翻车写法：
立即学习“前端免费学习笔记（深入）”；
-
grid-area: "label";→ 引号非法，应为grid-area: label; -
grid-area: Label;→ 首字母大写，和模板中label不匹配 -
grid-area: form-label;→ 模板中没定义form-label，即使类名是form-label也无效 -
grid-area: label-input;→ 名字不存在，元素退回到文档流顶部左侧
多字段共用同一区域？小心层叠和语义混乱
想让两个 <input> 都落在 input 区域？可以，但它们会重叠渲染——后写的 HTML 元素盖住前面的，不是并排。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
适用场景有限，比如：
- 输入框 + 右侧图标按钮（
input和icon共用input区域，再用z-index控制图层层级） - 带验证状态提示的输入框（
input+error-message同属input区域，靠position: absolute定位提示文字）
但别用来排多个并列字段——正确做法是扩展区域名，比如 "name-label name-input ."、"email-label email-input ."，然后分别设 grid-area: name-label、grid-area: name-input。
响应式表单切换布局时，grid-template-areas 和 grid-area 必须同步更新
移动端把标签+输入框从左右排变成上下堆叠，不能只改父容器的 grid-template-areas。如果桌面端是 "label input action"，而你只在媒体查询里改成 "label" "input" "action"，但子元素仍保持 grid-area: label 等旧值——这没问题；但如果某个断点删掉了 action 区域，对应按钮的 grid-area: action 就会失效，按钮可能跑到左上角。
关键检查点：
- 每个断点下的
grid-template-areas字符串，必须包含所有仍在使用的grid-area值 - 若某字段在小屏隐藏，要么给它设
display: none，要么把grid-area改成auto（避免无家可归） - 别依赖 CSS 自定义属性动态插值，
grid-area: var(--area-label)不合法，浏览器直接忽略
真正容易被忽略的是 JS 动态插入的表单项：哪怕 HTML 结构完全正确，也必须手动执行 el.style.gridArea = "label"，否则它不会自动识别区域。
