用 display: grid 实现多级嵌套表单需每层容器独立声明 grid 并对齐轨道：外层用 grid-template-areas 划分区块，字段组用 auto-fit + minmax 响应列数，子组显式 span 或绑定区域；统一设 align-items: start 防拉伸错位，input 等加 max-width: 100% 与 min-width: 0 避溢出，优先用 @container 查询按内容密度响应。
用 display: grid 实现多级嵌套表单，关键不是“一层套一层”，而是每层容器都独立声明 grid，并让子层轨道与父层逻辑对齐——尤其当字段分组、地址块、动态条件区混排时，靠 flex 或浮动极易错位或坍塌。
每层容器都设 grid，不依赖外层自动继承
外层表单、字段组（如「联系信息」）、子字段组（如「省/市/区三级联动」）都要各自写 display: grid。不能只在最外层设 grid，内层靠 margin/padding 模拟分栏。
- 外层容器用 grid-template-areas 划分大区块，例如 "header header" "left right" "footer footer"
- 字段组（.field-group）设 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，防窄屏挤垮、宽屏留白
- 子字段组（如地址块）必须显式加 grid-column: span 2 或绑定命名区域，否则 auto-fit 会把它拆成单列
防宽度坍塌：box-sizing + min-width + max-width 组合用
嵌套中 input width: 100% 常因 padding/border 溢出，iOS Safari 尤其明显。单纯 box-sizing: border-box 不够，还要约束容器尺寸边界。
- 所有字段容器（.form-control）加 min-width: 0，否则 grid 会忽略其内部百分比计算
- input、select、textarea 加 max-width: 100%，而非仅 width: 100%
- 带图标的输入框（如搜索框），图标用 position: absolute，父容器加 padding-right 预留空间
响应式别只看屏幕宽，要看字段密度
同一屏幕宽度下，字段数不同，布局需求就不同。比如 iPad 上 4 个字段适合单列，12 个字段则需保持双列才易操作。
- 优先用 @container 查询替代 @media，真正按容器内容密度触发断点
- 若暂不支持 container query，可在字段组上设 minmax(320px, 1fr)，配合父层 repeat(auto-fit) 自适应列数
- 避免在子字段组里重写 grid-template-columns —— 这会切断轨道继承，导致对齐断裂
多行文本撑高问题：统一 align-items: start
某字段含换行备注（如“合同已延期三次，详见附件…”），默认 align-items: stretch 会让整行被拉高，破坏其他字段对齐。
- 给所有字段行容器（如 .form-row）设 align-items: start
- 文字内容自然从顶部对齐，不会因某一项变高而牵连全局
- 如需底部对齐某组按钮，单独用 margin-top: auto，不改整行对齐方式
