css subgrid 解决复杂响应式对齐的根本原因是子级放弃自建轨道而复用父级物理坐标系；父容器必须显式定义 grid-template-rows/columns，否则 subgrid 无效，且响应式调整应仅在父级进行。
CSS subgrid 能解决复杂响应式对齐，根本原因不是它“更智能”，而是它让子级网格放弃自建轨道，直接挂载到父级已定义的物理坐标系上——对齐从此变成坐标复用，而非反复计算或强行拉伸。
父容器没显式定义 grid-template-rows 或 grid-template-columns，subgrid 就是摆设
很多人写完 grid-template-rows: subgrid 没效果，打开开发者工具一看，computed 样式里 grid-template-rows 是 none。这不是浏览器 bug，是规范强制要求：subgrid 只继承“已声明”的轨道，不推导、不猜测、不 fallback。
- ✅ 正确做法：父容器必须写明具体轨道，比如
grid-template-rows: auto 1fr auto或grid-template-columns: [label] max-content [input] 1fr - ❌ 错误写法：只靠
grid-auto-rows: minmax(100px, auto)或grid-auto-flow: column—— 这些不产生可继承的轨道线 - ⚠️ 验证方式：在 Chrome DevTools 的 Layout 面板勾选 “Show line names”，看父容器是否有实线（而非虚线）轨道被标出
响应式中断常因子元素自己写了 @media 覆盖 subgrid
父容器在 @media (min-width: 768px) 里把列数从 1 改成 3，子元素却在同个断点里写了 grid-template-columns: 1fr 1fr —— 这等于亲手切断继承链。subgrid 不会“自动同步”，它只忠于当前生效的声明值。
- ✅ 推荐结构：所有响应式轨道调整只放在父容器，子元素保持纯
grid-template-columns: subgrid，不加任何媒体查询 - ❌ 常见陷阱：为兼容旧浏览器加了
@supports not (grid-template-columns: subgrid)fallback 后，忘记在支持 subgrid 的分支里移除子元素的 fallback 网格定义 - ? 性能提示：subgrid 继承不触发 layout，比 JS 监听 resize + 重设 height 轻量得多，但前提是别用 media query 主动破坏它
跨卡片底部对齐必须用 grid-row 锚定父级行线，不是靠 align-self 或 margin-top: auto
想让所有卡片里的“购买按钮”严格落在同一水平线，关键不是控制单张卡片内部，而是让它们都落在父网格的第三行 —— 这才是 subgrid 解决的核心问题。内部“推到底部”只能保证单卡内有效，跨卡毫无意义。
- ✅ 正确逻辑：父容器设
grid-template-rows: auto minmax(60px, 1fr) auto，每个卡片设grid-template-rows: subgrid，按钮加grid-row: 3 - ❌ 错误思路：卡片内部用
display: grid; grid-template-rows: 1fr auto再给按钮align-self: end—— 这只是各自找底，不是共用一条底线 - ⚠️ 注意：命名线（如
[footer]）以父级定义为准，子元素里写同名线会被忽略；调试时用 Grid Inspector 看“line names”来源最直观
真正难的从来不是怎么写 subgrid，而是守住父轨道的稳定性：别让 gap 插入隐式轨道，别让中间层用 span 或空元素打断列连续性，也别在子元素上画蛇添足地重定义轨道 —— 它要的不是你帮忙，是你放手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
