根本原因是grid-template-rows: auto使各行高度不一，导致按钮底部不对齐；应为每张卡片设置display: grid与grid-template-rows: 1fr auto，并确保外层align-items: stretch以实现等高和底部锚定。
为什么 grid-template-rows: auto 会让按钮错位？
多行卡片中按钮底部不对齐，根本原因常是每张卡片高度不一致，而默认的 grid-template-rows: auto 让每行按内容撑开，导致同一列中不同卡片的底部（尤其是按钮所在位置）不在同一水平线。这不是视觉错觉，而是 Grid 行高未统一造成的布局断裂。
解决思路不是强行拉伸卡片，而是让按钮在各自卡片内“锚定到底部”，同时保证所有卡片在该区域有可对齐的基准线。
推荐做法：用 display: grid + grid-template-rows: 1fr auto 控制单张卡片内部结构，把按钮固定在第二行（即底部），再配合容器级 Grid 的 align-items: stretch（默认值，确保卡片等高）。
卡片内部必须用 grid-template-rows: 1fr auto
仅靠外层 Grid 容器无法控制内部按钮位置；必须给每张卡片（如 .card）设为 Grid，并显式划分两行：内容区占剩余空间（1fr），按钮区固定为内容高度（auto 或指定最小高，如 minmax(40px, auto)）。
示例关键 CSS：
.card {
display: grid;
grid-template-rows: 1fr auto;
height: 100%; /* 确保继承外层 stretch 后的高度 */
}
<p>.card .btn {
grid-row: 2; /<em> 明确放在第二行 </em>/
align-self: end; /<em> 按钮自身靠下（可选，增强容错） </em>/
}</p>
- 漏写
height: 100%是常见坑——卡片没继承高度，1fr就没参照，按钮仍会浮动 - 不要用
margin-top: auto替代grid-row: 2，它在 Grid 子项上行为不稳定，尤其在嵌套 Grid 中易失效 - 若按钮需居中对齐，用
justify-self: center，别依赖父容器 text-align
外层 Grid 容器要设 align-items: stretch 并禁用 grid-auto-rows
外层（如 .card-grid）必须保持 align-items: stretch（默认就是，但显式写出更安全），否则卡片不会等高，内部 1fr 失效。同时避免设置 grid-auto-rows，它会覆盖 grid-template-rows 对单卡的控制逻辑。
正确外层写法：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
align-items: stretch; /* 关键：让每张卡片高度一致 */
/* 不要写 grid-auto-rows: 1fr —— 这会干扰卡片内部的 1fr */
}
- 如果用了
grid-auto-flow: dense，可能打乱顺序，间接影响对齐感知，非必要不启用 - 在 Flex 布局里模拟类似效果很吃力，Grid 是目前唯一能同时约束“行内等高”和“子元素锚定”的原生方案
响应式断点下按钮错位？检查 minmax() 和 fit-content() 的组合
小屏时卡片宽度压缩，文字换行增多，可能让内容区高度突增，挤压按钮位置。此时单靠 1fr auto 不够稳健。
升级方案：把卡片内容区改为 minmax(0, 1fr)，允许其收缩（防止溢出破坏网格），按钮行用 minmax(40px, max-content) 保底高度：
.card {
grid-template-rows: minmax(0, 1fr) minmax(40px, max-content);
}
-
minmax(0, 1fr)比单纯1fr更抗压缩，尤其在 flex/grid 嵌套或字体缩放场景下 - 避免用
fit-content(200px)之类限制内容区，它可能截断文字且不触发滚动，反而掩盖对齐问题 - 真遇到极端换行，加
overflow: hidden和text-overflow: ellipsis在标题/描述上，比硬调按钮位置更可控
最易被忽略的是：卡片内部 Grid 的 grid-template-rows 必须存在，且不能被后代元素的 height 或 min-height 覆盖。一旦某张卡片里有个 img 没设 max-width: 100%，它就可能撑破整个网格流，让所有对齐前功尽弃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
