align-self只作用于直系网格项或Flex子项，若按钮在卡片内部而非父网格直接子元素，则无法跨层生效；需通过subgrid继承父行轨道并显式定位到命名行（如footer）才能实现底部对齐。
为什么直接设 align-self: end 不管用
因为卡片本身是父网格的子项，而按钮是卡片内部的子元素——align-self 只作用于**直接参与父网格布局的项目**。如果你没让卡片继承父网格的行轨道，那卡片内部的按钮再怎么设置对齐，也只是在自己那个孤立的、高度不定的网格里“贴底”，跟其他卡片完全无关。
常见错误包括：
• 卡片用了 display: grid 但没声明 grid-template-rows: subgrid
• 父容器只写了 grid-auto-rows 或靠 auto-fit 动态生成列，没定义显式 grid-template-rows
• 卡片没用 grid-row 明确指定跨多少行（比如 grid-row: 1 / -1），导致浏览器无法将子网格锚定到具体轨道
grid-template-rows: subgrid 必须配合显式父行轨道
Subgrid 不继承隐式轨道。父容器必须用 grid-template-rows 明确定义行高，且至少包含一个可用于底部对齐的固定轨道（比如最后一行放按钮）。
✅ 正确写法：
立即学习“前端免费学习笔记（深入）”；
.card-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto 1fr auto; /* 四行：标题 / 内容 / 占位 / 按钮 */
gap: 16px;
}
<p>.card {
display: grid;
grid-template-rows: subgrid; /<em> 关键：继承上面四行 </em>/
grid-row: 1 / -1; /<em> 占满全部四行 </em>/
}❌ 错误写法：
• grid-template-rows: repeat(auto-fit, minmax(100px, 1fr))) —— 没有显式行数，subgrid 失效
• grid-auto-rows: 80px —— Subgrid 不读取 auto 行
• .card { grid-template-rows: subgrid 40px } —— 混用 subgrid 和具体值，整条声明被忽略
按钮必须落在父网格的“按钮行”轨道上
仅靠 subgrid 继承还不够，按钮得真正落在父网格中为底部预留的那一行里。否则它会按自身内容撑开新行，破坏对齐。
推荐做法：
- 父网格最后一行命名，比如
grid-template-rows: auto auto 1fr [footer] - 卡片内按钮显式定位：
button { grid-row: footer; justify-self: center; } - 避免给按钮容器加额外 padding/margin，尤其不要用
margin-top: auto—— 它在 subgrid 中行为不可控，且容易被 gap 干扰 - 如果按钮需要水平分布（如“确认”“取消”），把按钮所在区域（如
.card-footer）设为 flex 容器，而不是靠 grid-column 调整 —— subgrid 的列继承和按钮间距控制应分层处理
响应式下命名线比数字索引更可靠
断点切换列数时，用 grid-row: 4 这类数字索引会错位；而命名线（如 [footer]）在父容器媒体查询中重定义后，子元素仍能稳定锚定。
⚠️ 注意两个静默失效点：
• 子卡片自己写了 @media (min-width: 768px) { grid-template-rows: auto 1fr auto; } —— 直接覆盖继承，subgrid 断链
• 父容器用了 gap: 20px，但子卡片没设 gap: inherit 或用 grid-column: span N 覆盖整行 —— 隐式轨道插入，视觉偏移
Chrome DevTools 的 Layout 面板里勾选 “Show line names”，看到实线轨道才说明命名线被正确识别。
