align-items: stretch 未填满行高是因为行高未被约束，需显式设置 grid-template-rows 或 grid-auto-rows，并确保容器有高度上下文、子元素无 height/max-height 干扰、内部内容合理布局。
align-items: stretch 为什么没填满行高
Grid 子元素高度不一致、底部留白，不是 align-items: stretch 没生效，而是它“没东西可拉”——行高本身没被约束。浏览器默认按内容最高项定行高，其余项虽被拉伸，但若该行实际高度由一个高卡片决定，其他卡片内部 padding/margin/font-size 差异仍会暴露白边。
关键判断：打开开发者工具，看 grid 容器的「Computed」面板里 grid-template-rows 值是不是 none 或 auto。如果是，说明行高完全由内容驱动，stretch 只是被动跟随，不是主动统高。
- 显式设置
grid-template-rows: 1fr（单行）或grid-template-rows: repeat(2, 1fr)（两行），给每行一个明确的等分高度锚点 - 若行数动态（如
auto-fit），改用grid-auto-rows: 1fr，它作用于所有隐式生成的行，响应式更稳 - 容器必须有高度上下文：如果父容器
height: auto且无内容撑开，1fr会坍缩为 0 —— 加min-height: 300px测试是否立刻见效
子元素内部溢出破坏视觉等高
即使外部网格拉伸成功，卡片内文字换行、图片未约束、按钮沉底，都会让“等高”变成假象，白边实际来自内容错位而非容器高度差。
典型表现：所有卡片 DOM 高度一致，但文字块顶部对齐、按钮却卡在底部，中间大片留白；或某张图没设 height: 100%，把整行撑高，其他卡片被拉伸后内部空荡。
- 给卡片（grid item）加
min-height: 0：防止内部 flex/grid 因 shrink 行为失效导致高度计算异常 - 图片必须加
height: 100%; object-fit: cover;，并确保其父容器（即卡片）有明确高度上下文 - 卡片内部用
display: flex; flex-direction: column;，标题/描述/按钮拆成区块，描述区加flex: 1吸收剩余空间 - 统一
box-sizing: border-box和内边距，避免padding在不同卡片间造成视觉偏差
align-self 或 height 设置悄悄关掉了 stretch
align-items: stretch 是 Grid 容器默认值，但子元素可以单方面退出：只要写了 align-self: start、height: 200px、max-height: 300px，哪怕只在一个卡片上，它就不再参与拉伸，白边立刻出现。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
检查方式：在开发者工具中选中一个“矮卡片”，看 align-self 计算值是否为 auto（继承 stretch）；再看 height 和 max-height 是否为 auto。
- 批量重置：给所有卡片加
align-self: stretch，比依赖继承更可靠 - 删掉所有卡片上的
height、max-height；min-height可保留，但别设min-height: 0（它会禁用 stretch） - 警惕 CSS 重置库或 UI 框架：有些会全局设
* { align-items: flex-start }，需针对性覆盖
跨行子项（grid-row: span 2）导致整行错位
一旦某个卡片用了 grid-row: span 2，它就脱离当前行的 align-items 约束，独立占据两行高度；其他单行卡片仍按各自所在行 stretch，结果是：跨行项像一根柱子插在中间，左右卡片被压缩或拉伸得极不自然，白边集中在它们交界处。
这不是 bug，是 Grid 的设计逻辑——stretch 只在同一行内生效，不跨行对齐。
- 真要跨行，所有卡片都保持
grid-row: span 1，改用grid-template-rows: repeat(2, minmax(min-content, 1fr))+ 显式grid-row-start控制起始位置 - 或者放弃纯 CSS，用
display: contents把跨行逻辑从渲染树移除，靠 JS 或结构重组实现语义跨行 - 最简方案：不用跨行，改用卡片内部
flex-direction: column+flex: 1模拟“视觉跨行”效果
白边问题往往不是单一原因，而是 grid-auto-rows 缺失 + 卡片内 min-height: 0 忘加 + 一张图漏了 object-fit 三者叠加的结果。调的时候别只盯一个地方，先锁死行高定义，再逐层检查卡片内部约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
