grid-template-areas 适合表单因语义自由、结构清晰、响应式成本低且避免错行；它用可读字符串定义逻辑区块，再通过 grid-area 精准匹配元素，而 table 强制行列语义，不适用于天然无行列关系的表单控件。
直接用 grid-template-areas 写表单布局，比 float 或 flex 更直观、更少出错，但必须按区域命名+元素匹配两步走，漏一步就完全不生效。
为什么 grid-template-areas 适合表单而非表格
HTML <table> 强制语义绑定（<tr>/<td>），而表单控件天然无行列关系；grid-template-areas 允许你用可读字符串定义逻辑区块（如 "label email input"），再让每个元素通过 grid-area 对号入座——结构清晰、响应式改写成本低，且不会因内容高度差异导致错行。
- 常见错误：只写
grid-template-areas却没给子元素设grid-area，结果所有控件堆在左上角 - 典型场景：登录表单（邮箱+密码+提交按钮）、地址字段分组（省/市/区三列并排）、带说明文字的复选框组
- 兼容性注意：
grid-template-areas在 IE 中完全不支持，如需兼容 IE11，必须降级为display: flex或用 JS 检测回退
grid-template-areas 字符串怎么写才合法
字符串中每一对引号代表一行，空格分隔列，重复名称表示跨列，点（.）代表空白单元格。名称只能是字母、数字、短横线，且必须和 grid-area 值严格一致（区分大小写）。
- 正确写法：
grid-template-areas: "label email input" "label pass input" " . submit . "; - 错误写法：
"label email input" "label pass input" "submit"—— 第三行列数不匹配，整条声明被浏览器忽略 - 参数差异：
grid-template-areas不接受函数或计算值，不能写calc()或变量，只能是纯字符串 - 性能影响：字符串过长（如超过 10 行 × 10 列）会轻微增加 CSS 解析时间，但对表单这种小规模布局无感知
如何让 label 和 input 真正对齐到同一网格行
关键不是靠 margin 或 float 拉齐，而是让它们共享同一行的区域名，并用 grid-column 微调宽度比例。
立即学习“前端免费学习笔记（深入）”；
- 必须把 label 和 input 放在同一父容器下（如
<div class="form-row">），否则无法参与同一个网格上下文 - 示例结构：
.form-grid { display: grid; grid-template-columns: 120px 1fr; gap: 8px; grid-template-areas: "label email" "label pass" " . submit"; } .form-row label { grid-area: label; } .form-row input[type="email"] { grid-area: email; } .form-row input[type="password"] { grid-area: pass; } .form-row button { grid-area: submit; } - 容易踩的坑：label 设了
display: block后又加float，会脱离网格流，导致grid-area失效 - 如果 label 文字超长换行，用
white-space: normal+overflow-wrap: break-word控制，别依赖固定宽
响应式切换时 grid-template-areas 怎么改
媒体查询里重写整个 grid-template-areas 字符串是最稳妥的方式，不要试图用 JS 动态拼接——CSS 层面无法读取 JS 变量。
- 小屏竖排写法：
@media (max-width: 480px) { .form-grid { grid-template-areas: "label" "input" "label" "input" "submit"; grid-template-columns: 1fr; } } - 注意：不同断点下的区域名必须全部覆盖，比如 desktop 用了
email和pass，mobile 也得保留这两个名，哪怕只是占位（用.） - 复杂点在于多组字段嵌套（如「收货地址」含省市区三级下拉），这时建议用
fieldset分块，每块独立定义grid-template-areas，避免单个字符串失控 - 容易被忽略的地方：
gap在不同断点下最好也同步调整，比如 desktop 用gap: 12px，mobile 改成gap: 8px，否则紧凑感不一致
