CSS Grid 通过 grid-template-areas 和 grid-area 实现语义化表单布局，支持行列约束、跨格定位、统一间距对齐及响应式切换，无需额外 HTML 结构。
表单区域布局混乱，本质是缺乏明确的行列约束。用 CSS Grid 可以直接定义行、列结构，让表单控件按逻辑分组对齐，不再依赖浮动、inline-block 或嵌套 div 拼凑。
用 grid-template-areas 划分语义区域
给每个表单项（如标签、输入框、错误提示）分配语义名称，再用 grid-template-areas 直观描述布局结构。浏览器会自动按名称渲染对应元素。
- 在表单容器上设置
display: grid和grid-template-areas - 为每个子元素设置
grid-area: 名称，名称需与模板中一致 - 用点（
.）表示空白格，换行用引号分隔，保持可读性
例如姓名字段含 label、input、error，可写成：
grid-template-areas: "label input" ". error";
用 grid-column / grid-row 精确控制跨格
当某个控件需要横跨多列（如提交按钮占满整行）或纵向合并（如多行文本域配一个标签），不用额外包裹，直接用定位属性即可。
-
grid-column: 1 / -1表示从第 1 列开始，到最后一列结束（即全宽） -
grid-row: 1 / 3表示占第 1 行到第 3 行之间的区域（含第 1 行，不含第 3 行） - 配合
grid-auto-rows: minmax(40px, auto)可让行高自适应内容
用 grid-gap + align-items 统一间距和对齐
避免手动写 margin/padding 导致错位。Grid 的 gap 属性统一控制行列间距，align-items 控制所有子项的垂直对齐方式。
-
gap: 12px 16px—— 行间距 12px，列间距 16px -
align-items: center让 label 和 input 垂直居中对齐（适合单行输入） -
justify-items: start确保所有控件左对齐，避免因内容长度不同导致偏移
响应式只需改 template，不重写结构
在小屏下把两列表单改为单列，不需要改 HTML，也不用新增 class。用媒体查询切换 grid-template-areas 即可。
- 桌面端：
"label input" " . error" - 移动端：
"label" "input" "error" - 所有元素仍保持原有语义命名，CSS 控制呈现，HTML 更干净
