卡片高度不一致的根源是grid默认align-items: stretch需行高锚点，而未设grid-template-rows时浏览器按内容最高项定行高；解决需显式定义grid-template-rows: 1fr或grid-auto-rows: 1fr，并配合min-height、flex-column内部对齐及aspect-ratio统一图片。
卡片高度不一致是因为 grid 默认对齐方式是 stretch，但子项内容撑开后没强制约束
Grid 容器中，align-items: stretch（默认值）会让子项在交叉轴（通常是垂直方向）拉伸填满行高，但前提是该行有明确高度。如果没设 grid-template-rows 或用 auto、min-content 等弹性值，浏览器会按内容最高项决定行高，其余卡片虽被拉伸，但内部文字换行、padding、margin 差异仍会导致视觉高度不一致——尤其是文字量不同或图片缺失时。
用 grid-template-rows: 1fr 强制等高，但需配合 align-items: stretch
给行高设为等分单位可让每行所有卡片严格等高：
-
grid-template-rows必须显式声明，例如grid-template-rows: repeat(2, 1fr)（两行等高）或grid-template-rows: 1fr 1fr - 确保容器有足够高度，否则
1fr无参照；可在父容器加min-height: 300px测试 - 卡片内部若含
height: 100%或绝对定位元素，需确认其父级（即 grid item）已脱离文档流或设position: relative - 慎用
align-items: flex-start——它会关闭拉伸，卡片恢复内容实际高度，失去等高效果
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr 1fr; /* 关键：显式定义行高 */
gap: 1rem;
}内容区域用 min-height + flex 做内部高度对齐，比纯 stretch 更可控
单纯依赖 stretch 容易受字体行高、内边距、标题层级影响。更稳妥的方式是在卡片内部用 Flex 控制内容区块：
- 卡片本身保持
display: grid或display: flex，设flex-direction: column - 把标题、描述、按钮等拆成独立区块，给描述区加
min-height: 6em或flex: 1 - 避免在卡片上写死
height，否则响应式断点下容易溢出 - 图片建议统一宽高比，用
aspect-ratio: 4/3+object-fit: cover防止拉伸变形
.card {
display: flex;
flex-direction: column;
height: 100%;
}
.card-content {
flex: 1;
min-height: 5rem;
}
.card-footer {
margin-top: auto;
}
响应式下 grid-auto-rows 替代 grid-template-rows 更灵活，但要注意 Safari 兼容性
当卡片数量不确定（如动态列表），grid-template-rows 写死行数不现实，此时改用 grid-auto-rows：
立即学习“前端免费学习笔记（深入）”；
-
grid-auto-rows: 1fr会让所有**自动创建的行**等高（即超出显式定义的行） - 必须搭配
grid-auto-flow: row（默认值，可省略） - Safari 15.4 之前不支持
1fr在grid-auto-rows中生效，降级方案是用固定值如200px或 JS 补齐 - 如果卡片有悬停放大、展开详情等交互，等高布局可能造成底部错位，建议用
transform: scale()替代 height 变化
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-auto-rows: 1fr; /* 动态行也等高 */
gap: 1rem;
}真正卡住的往往不是 stretch 没生效，而是容器高度没锚点、内容区块没隔离、或者 Safari 里 grid-auto-rows: 1fr 静默失效。先检查 computed styles 里 grid row height 是多少，再决定动 CSS 还是补一层 flex 容器。
