align-items: start 是最直接的“不拉伸”解法，可使卡片按自身内容高度渲染并顶部对齐；若需等高则须确保行高有约束且容器具备高度上下文。
align-items: start 是最直接的“不拉伸”解法
默认 align-items: stretch 会让所有子项强行填满行高，但你真正需要的往往不是“等高”，而是“顶部对齐、各自占位”。设成 align-items: start 后，每个卡片只按自身内容高度渲染，顶部自动对齐，白边消失，也不用管 grid-template-rows 是否显式定义。
常见误操作：
– 写了 align-items: start 却还留着 grid-template-rows: 1fr → 行高被强制等分，start 失效
– 卡片内部用了 position: absolute 但没给父卡片加 position: relative → 视觉上看起来没对齐，其实是定位上下文丢失
想真等高？必须约束行高 + 容器有高度上下文
靠 align-items: stretch 拉伸成功，前提是行高本身得“有东西可拉”。浏览器不会凭空造出高度——如果 grid-template-rows 是 auto（默认）或未定义，那每行都按内容最高项定高，其余项再拉也拉不出新高度。
-
grid-template-rows: repeat(3, 1fr)：适合固定行数，容器需有height或min-height，否则1fr退化为auto -
grid-auto-rows: minmax(200px, 1fr)：更适合响应式，隐式行自动获得最小保障 + 剩余空间均分 - 检查开发者工具「Computed」面板里
grid-template-rows是否为none或auto—— 是的话，说明行高完全由内容驱动，stretch只是被动跟随
卡片内部内容错位才是白边真凶
即使外部网格拉伸成功，DOM 高度一致，视觉上仍可能留白：文字贴顶、按钮沉底、图片没约束……这些都不是 Grid 的问题，而是卡片内部失控。
关键控制点：
– 给卡片加 min-height: 0，尤其它本身是 flex 容器时，防默认 min-height: auto 干扰高度计算
– 图片必须设 height: 100% + object-fit: cover，且父卡片要有明确高度上下文
– 卡片内用 display: flex; flex-direction: column，描述区加 flex: 1 吸收剩余空间
– 删掉所有卡片上的 height 和 max-height，它们会悄悄关闭 stretch
align-self 或 height 设置会单方面退出拉伸
align-items: stretch 是默认值，但它非常脆弱：只要任意一个卡片写了 align-self: start、height: 200px 或 max-height: 300px，它就立刻脱离拉伸队列，整行高度被它拖垮，白边重现。
排查建议：
– 在开发者工具中选中“矮卡片”，看 align-self 计算值是否为 auto（继承 stretch）
– 看 height 和 max-height 是否为 auto；若不是，就是它在捣鬼
– 批量重置：统一加 align-self: stretch，比依赖继承更可靠
最易被忽略的点：容器没有高度上下文。哪怕写了 grid-template-rows: 1fr，父级是 height: auto 且无内容撑开，1fr 就会坍缩为 0 —— 加个 min-height: 300px 测试一下，常能立刻验证是不是这个问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
