移动端表单用subgrid比flex更稳，因subgrid依赖父级显式轨道坐标而非内容尺寸，避免字体缩放、行高变化、padding差异导致的基线漂移；而flex的align-items: baseline在移动端极易失效。
为什么移动端表单用 subgrid 比 flex 更稳？
Flex 的 align-items: baseline 在移动端极易失效：字体缩放、行高变化、输入框内 padding 差异，都会让 label 和 input 的基线漂移。而 subgrid 不依赖内容尺寸，它靠的是父级显式定义的轨道坐标——哪怕某字段没 .hint，那行依然存在，input 仍被钉在第二行，视觉对齐不随内容增减抖动。
grid-template-rows: subgrid 无效？先查这三件事
写了 grid-template-rows: subgrid 却没对齐，90% 是以下任一原因：
- 父容器没写
grid-template-rows，只用了grid-auto-rows或gap—— subgrid 不继承隐式轨道 -
.form-field不是父网格的直接子元素，中间夹了display: contents容器或fieldset—— subgrid 只认真实 DOM 子节点 - 开发者工具里检查 computed 样式，
grid-template-rows解析为none而非subgrid—— 声明已被浏览器静默丢弃
响应式切换时 subgrid 怎么不掉链子？
移动端常需从多列转单列，关键不是重写整个网格，而是让 subgrid 跟着父级轨道动态适配：
- 父容器用
@media (max-width: 768px)改grid-template-columns: 1fr，子元素保持grid-template-rows: subgrid不变，列方向坍缩但行轨道仍继承 - 避免在子元素上写
@media覆盖grid-template-columns—— 一旦加了，就等于主动切断继承 - 若需小屏下隐藏
.hint，用display: none而非visibility: hidden，否则空行仍占位，破坏对齐前提
命名线冲突导致错位？别自己重新声明
父容器定义了 grid-template-rows: [label] auto [input] 1fr [hint] auto，子元素想用命名线定位，必须直接消费父级线名：
-
.form-field label { grid-row: label; }✅ 有效 -
.form-field { grid-template-rows: [label] subgrid; }❌ 静默失败 —— 子网格不能重定义同名线，只能读取父级已声明的 - Chrome/Firefox Grid Inspector 勾选 “Show line names”，一眼看出哪些线来自父级、哪些未生效
grid-template-rows: subgrid，而是确保从父容器到子元素的 DOM 层级干净、轨道定义显式、媒体查询不干扰继承链——空文本节点、display: contents、甚至 fieldset 的默认样式，都可能悄悄打断这条链。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
