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 更干净