align-items: start能阻止卡片拉伸，因它使子项按内容高度顶对齐，放弃默认的stretch拉伸行为；此时卡片仅占自身内容所需空间，不再强制填满行高。
align-items: start 为什么能阻止卡片被拉伸
默认情况下，grid-container 的 align-items 值是 stretch，这意味着所有 grid item 会在交叉轴（通常是垂直方向）上自动拉伸，填满行高。哪怕某张卡片只有两行文字，它也会被“撑开”到和最高卡片一样高——这不是你想要的“等高对齐”，而是强制拉伸。
设为 align-items: start 后，每个卡片只占用自身内容所需高度，顶部对齐，不再拉伸。这是最直接、副作用最小的解法。
注意：这个行为只影响交叉轴（column layout 下是水平轴，但绝大多数卡片布局是 row 方向主轴，所以交叉轴 = 垂直方向）。
Grid 容器必须显式定义 grid-template-rows 吗
不需要。用 align-items: start 时，grid-template-rows 可以完全不写，让浏览器按内容自动计算每行高度。强行设成 grid-template-rows: 1fr 或 auto 反而可能引入意外约束。
常见误操作：
- 写了
grid-template-rows: 1fr→ 所有行被强制等高，align-items: start失效 - 用了
grid-auto-rows: minmax(200px, auto)却忘了卡片内容远小于 200px → 留下大片空白 - 在响应式中只改了
grid-template-columns，却漏掉重置grid-auto-rows→ 小屏下卡片高度异常
当卡片内有绝对定位元素时，start 对齐还可靠吗
基本可靠，但需检查父容器是否设置了 position: relative。因为 align-items: start 控制的是 grid item 在网格轨道内的对齐位置，而绝对定位元素的 top 是相对于其最近的 position: relative 祖先计算的。
如果卡片本身没设 position: relative，又在内部写了 position: absolute; top: 0;，那个“0”会从 body 或更外层算起，导致视觉错位，看起来像没对齐。
建议统一加：
.card {
position: relative;
align-self: start; /* 可选，单个卡片覆盖容器 align-items */
}
Flexbox 对比：为什么这里 Grid + align-items:start 更合适
Flex 容器用 align-items: flex-start 也能达到类似效果，但 Grid 在多行卡片流中更可控：
- Flex 的
flex-wrap: wrap下，无法精确控制“每行几张”，容易因宽度微小变化导致换行错乱 - Grid 可用
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))实现真正响应式列数，且每行高度独立 - Flex 中某个超高卡片会撑高整行，其他卡片即使设了
align-items: flex-start，其底边仍会被动上移（因行高被拉高）；Grid 则天然隔离各行高度
如果你已经用 Flex 做卡片流，又遇到高度不一致+底部留白问题，别硬调 align-items，直接切 Grid 更省力。
真正容易被忽略的点是：很多人只改了 align-items，却没检查 grid-auto-rows 是否残留了旧值，或者卡片内部 margin/padding 不一致导致视觉偏差——对齐是数值级的，差 2px 都可能觉得“没对齐”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
