Grid布局中项目高度不一致时，应使用grid-auto-rows: minmax(最小值, 最大值)统一行高，并配合align-items控制项目内垂直对齐，避免跨行干扰需显式设置grid-row-end。
Grid网格布局中项目高度不一致，本质是行高未统一或内容撑开导致视觉错乱。用 grid-auto-rows 配合 minmax() 是最直接、可控的解法——它不依赖项目自身高度，而是由容器主动定义每行的“最小可用高度”和“弹性上限”，让所有行自动对齐又保留呼吸感。
auto-rows + minmax() 控制基础行高
设置 grid-auto-rows: minmax(100px, auto)，表示：每行至少 100px 高，内容多时可自动增高，但不会被压缩。这样即使某个项目只有标题，另一个含三段文字，它们所在行都会从 100px 起步，视觉上底边对齐更整齐。
- 最小值建议设为内容常见高度（如卡片标题+图标区域），避免留白过大
-
auto作为最大值，允许内容自然扩展，不截断也不强制拉伸 - 若希望所有行严格等高，可改用
minmax(150px, 150px)或直接写150px
配合 align-items 统一项目内部对齐
仅靠 grid-auto-rows 还不够——如果项目内文字长短不一，又没指定对齐方式，顶部对齐会让底部参差。此时在 grid 容器上加 align-items: start（默认值）或 center，能确保每个项目在行内垂直方向保持一致基准线。
-
align-items: start—— 项目顶部对齐，适合标题类内容 -
align-items: center—— 居中对齐，适合图标+文字组合卡片 - 避免用
stretch（默认行为），它会强行拉伸项目填满整行，常导致文字行高异常
用 grid-row-end 避免跨行干扰整体节奏
个别项目设置了 grid-row: span 2，容易带偏后续行的 auto-rows 计算。解决方法是在该元素上显式声明 grid-row-end: span 2，并确保容器使用 grid-auto-flow: row（默认值），让 Grid 引擎更稳定地按行生成轨道。
- 不推荐混用
grid-template-rows和grid-auto-rows，易引发冲突 - 如需部分行特殊处理，优先用
grid-template-rows: repeat(3, minmax(120px, auto))显式定义 - 调试时可在浏览器开发者工具中勾选“Show line numbers”查看实际行轨道分布
基本上就这些。auto-rows 与 minmax 的组合不是万能胶，但它把控制权交还给容器，而不是任由内容牵着鼻子走。调几次最小值，看两眼实际渲染，就能稳住大部分卡片/列表类布局的高度一致性。
