subgrid未生效是因为父容器未显式定义grid-template-rows，且子元素必须是直接子项；需确保父级有明确行轨道、无中间包裹层，并验证computed样式中解析为subgrid。
grid-template-rows: subgrid 为什么没生效
写了 grid-template-rows: subgrid 却发现卡片高度还是参差不齐，大概率是父级没提供可继承的行轨道。Subgrid 不会凭空生成坐标，它只复用父容器显式定义的 grid-template-rows ——如果父级只写了 grid-auto-rows: 1fr 或压根没设行定义，subgrid 就会静默退化为普通 grid。
检查三件事：
• 父容器是否声明了 grid-template-rows: minmax(4rem, max-content) 1fr auto 这类明确轨道
• 子卡片（.card）是否是父网格的**直接子元素**（中间不能有 display: contents、fieldset 或其他包裹层）
• 开发者工具里看 computed 样式，确认 grid-template-rows 解析结果确实是 subgrid，而不是 none
移动端卡片等高必须靠父级轨道约束，不是靠 stretch
align-items: stretch 在移动端不可靠：字体缩放、输入框内 padding 差异、甚至系统设置里的“更大文本”开关，都会让 stretch 拉出来的高度视觉错位。真正稳的是 subgrid 的坐标对齐——标题始终在第 1 行轨道内，数值区在第 2 行，按钮钉死在第 4 行，不管内容多或少，轨道位置不变。
实操要点：
• 父容器用 grid-template-rows: minmax(3.5rem, max-content) minmax(5rem, 1fr) auto 锁定三段内容最小高度
• 卡片内直接写 grid-template-rows: subgrid，不加 grid-template-columns（列方向仍由父级统一控制）
• 小屏单列时，只需改父级 grid-template-columns: 1fr，subgrid 行轨道自动继承，无需重写子元素样式
图片和文字必须结构对齐，否则 subgrid 也救不了
subgrid 解决的是“布局坐标对齐”，不是“内容高度压制”。如果某张卡片的图片原始尺寸是 800×600，另一张是 400×400，即使都在同一行轨道里，前者仍会把整行撑高，破坏视觉等高。
必须同步做这些事：
• 所有图片包裹在 .card-image 容器中，并设 aspect-ratio: 4/3; overflow: hidden;
• 标题统一截断两行：display: -webkit-box; -webkit-line-clamp: 2;
• 正文区域用 flex: 1 吸收剩余空间，避免文字多的卡片“鼓包”
• 按钮文字固定短语（如“查看详情”），禁用“点击此处了解全部功能”这类弹性文案
兼容性兜底和 Safari 的隐藏坑
目前 Chrome / Edge / Firefox 已原生支持 subgrid，但 Safari 16.4+ 才开始支持，且对 subgrid 在 grid-template-areas 中的组合支持不稳定。上线前务必测试真实 iOS 设备。
兜底方案不是降级成 flex，而是保留 subgrid 结构 + 增加 fallback：
• 父容器同时声明 grid-template-rows: subgrid 和 grid-auto-rows: 1fr（后者在 subgrid 不生效时接管）
• 给卡片加 min-height: 0，防止 Safari 下内部 flex 布局因 shrink 行为导致高度计算异常
• 避免在卡片上写 height: 100%，它会和 subgrid 的拉伸逻辑冲突，改用 height: 100%; + min-height: 0 组合更安全
最易被忽略的一点：subgrid 的稳定性不取决于你写了多少 CSS，而取决于父级轨道是否“可预测”。一旦某张卡片动态插入一个没设 display: none 的 .hint 元素，整行轨道就会被撑开——所以响应式切换时，宁可用 display: none 彻底移除，别用 visibility: hidden 留空占位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
