卡片高度不一致不是bug而是Grid默认行为：未设grid-template-rows时各行按自身内容高度计算，align-items: stretch仅作用于单个网格项内部；需用grid-auto-rows与grid-template-rows配合实现全局等高，并通过flex嵌套、min-height: 0、object-fit等约束内部内容。
为什么卡片高度不一致不是bug，而是Grid默认行为
Grid容器里卡片高度参差，不是你写错了，是浏览器按“每行内容撑开”算出来的——grid-template-rows没显式设高时，每一行只看自己那几个卡片的自然高度，互不干涉。align-items: stretch在这里不起跨行作用，它只让单个网格项内部拉伸，不拉齐整行。
常见错误是以为加了align-items: stretch就能全局等高，结果发现只有同一行内卡片对齐，换行后又错位。真正要的是让所有行都按最高卡片统一高度，得靠grid-auto-rows和grid-template-rows配合。
- 只写
grid-template-rows: 1fr→ 只影响第一行，后续隐式行仍按内容算 - 必须同时写
grid-template-rows: 1fr+grid-auto-rows: 1fr→ 显式行和隐式行全等高 - 更稳妥写法：
grid-auto-rows: minmax(min-content, 1fr)，防内容过少导致高度塌缩
卡片内部内容分布不均？Flex嵌套才是解法
等高只是第一步。卡片高度一致了，但标题短、文字少的卡片里按钮飘在中间，视觉上还是不齐——这不是Grid的问题，是卡片内部没约束。
每个.card必须设display: flex; flex-direction: column，再用flex: 1和margin-top: auto分配空间。关键点在于：min-height: 0必须加在.card上，不是.card-content上。
立即学习“前端免费学习笔记（深入）”；
-
.card { display: flex; flex-direction: column; min-height: 0; }—— 解除Flex子项最小高度限制 -
.card-content { flex: 1; }—— 占满剩余空间，不管文字几行 -
.card-footer { margin-top: auto; }—— 把按钮/操作区钉在底部 - 别用
height: 100%，它依赖父元素显式高度，在Grid中常失效
响应式列数变化时，等高突然失效？检查auto-fit和minmax
用repeat(auto-fit, minmax(280px, 1fr))做响应式列数，小屏下变成单列，但卡片高度又不一致了——问题往往出在minmax()第二参数或容器宽度上下文。
auto-fit会合并空轨道，auto-fill则强行铺满，后者在小屏易留空白列，干扰高度计算。另外，minmax(280px, 1fr)里如果容器本身有padding或外层gap，实际可用宽度变小，1fr分到的空间就缩水，导致flex: 1撑不开。
- 优先用
auto-fit，不用auto-fill -
minmax()第二参数必须是1fr，写成300px就失去弹性 - 给卡片容器加
width: 100%或max-width，确保Grid有明确可用宽度 - 测试时临时加
border: 1px solid red，确认容器是否真撑开了
图片和文字溢出破坏等高效果？卡片内部要加硬约束
卡片等高了，但某张图拉伸变形、某段标题换行太多把卡片顶高——Grid只管外框，不管里面怎么破。
图片必须用object-fit: cover + aspect-ratio锁定比例；多行标题要用-webkit-line-clamp截断；否则哪怕外框等高，内部内容一撑，视觉上还是参差。
-
img { width: 100%; height: 160px; object-fit: cover; }或aspect-ratio: 4/3 .card-title { display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; }-
.card { overflow: hidden; }配合上面截断才生效 - 慎用
align-items: stretch在外层Grid上——它会让所有卡片强制等高，但内容差异大时反而暴露大片空白
最易被忽略的是min-height: 0和overflow的配合：Grid分好高度后，子元素若没min-height: 0，默认min-height: auto会阻止收缩，导致overflow失效，文字照常溢出。
