CSS subgrid 是目前唯一能真正让子元素物理对齐父网格轨道的原生方案，它使子级网格行/列轨道与父级共享同一坐标系统，需父容器显式定义轨道且不可被子级媒体查询覆盖。
直接说结论：CSS subgrid 是目前唯一能真正让子元素「物理对齐」父网格轨道的原生方案，不是靠 JS 计算、不是靠 min-height 硬撑、也不是靠 Flexbox 模拟 —— 它让子级网格的行/列轨道和父级完全共享同一套坐标系统。
subgrid 必须配合 display: grid 且父容器已定义轨道
很多人写完 grid-template-rows: subgrid 却没效果，根本原因是父容器没显式定义 grid-template-rows 或 grid-auto-rows。Subgrid 不会“猜”轨道，它只继承已声明的轨道定义。
- ✅ 正确：父容器有
grid-template-rows: 100px auto 60px，子元素设grid-template-rows: subgrid才生效 - ❌ 错误：父容器只用
grid-auto-rows: minmax(100px, auto)（无显式行数），此时subgrid无法继承 —— 浏览器报Invalid property value - ⚠️ 注意：
subgrid对grid-template-columns和grid-template-rows是独立控制的，可以只继承列（grid-template-columns: subgrid），而自行定义行
响应式断点中 subgrid 的继承行为会中断
当用 @media 修改父容器的 grid-template-columns 时，子元素的 subgrid 会自动跟随更新 —— 但前提是子元素自身没有被媒体查询覆盖重写。一旦你在子元素上写了 @media (min-width: 768px) { grid-template-columns: 1fr 1fr; }，就等于主动放弃继承。
- ✅ 推荐做法：只在父容器上做响应式轨道调整，子元素保持纯
grid-template-columns: subgrid - ❌ 常见坑：为兼容旧浏览器加了 fallback（如
display: flex）后，忘记在子元素里关掉subgrid，导致布局错乱 - ? 性能提示：subgrid 继承不触发重排，比 JS 动态计算高度或 CSS
contain: layout更轻量
跨行对齐必须用 grid-row + subgrid 配合
要让多个子元素（比如标题、内容、按钮）在不同卡片中严格对齐底部，关键不是给卡片设固定高，而是让它们共用父网格的行轨道 —— 这正是 subgrid 解决的核心问题。
- ✅ 示例结构：父容器设
grid-template-rows: auto 1fr auto（头/主体/尾），每个.card设grid-template-rows: subgrid，再用grid-row: 3把按钮钉在第三行 - ❌ 错误思路：试图用
align-self: end或margin-top: auto在子网格内部“推”按钮到底部 —— 这只在单个卡片内有效，跨卡片无法对齐 - ⚠️ 兼容性注意：Safari 16+、Chrome 114+、Firefox 110+ 支持完整 subgrid；Edge 已随 Chromium 统一支持；不支持的浏览器需降级为
grid-auto-rows+min-height组合
真正难的不是写对那几行 CSS，而是理解 subgrid 不是“增强版 grid”，它是把父子网格从两个独立坐标系，变成一个共享轨道的联合体 —— 所以任何破坏轨道显式定义、或在子级擅自重定义轨道的操作，都会让对齐失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
