图片墙高度不一致的根源在于图片原始尺寸、宽高比、加载时机或父容器约束差异；用grid的auto-rows配合align-items: stretch可简洁实现等高，关键需子项设height: 100%并配object-fit: cover。
图片墙高度不一致，本质是子项内容（尤其是图片）原始尺寸、宽高比、加载时机或父容器约束不同导致的。用 grid 的 auto-rows 配合 align-items: stretch 是简洁有效的解法，关键在于理解它们如何协同控制行高与子项拉伸行为。
用 grid-template-rows: auto + align-items: stretch 拉齐单行内所有图片高度
当图片墙每行固定列数（如 3 列），且希望**同一行内所有图片高度一致**（按该行最高图拉伸），推荐如下写法：
- 给容器设
display: grid，用grid-template-columns: repeat(3, 1fr)控制列数 - 设置
grid-auto-rows: auto（默认值，可省略），让每行高度由该行最高子项决定 - 必须加
align-items: stretch（grid 容器默认值，但显式声明更稳妥），使子项在行内垂直方向自动拉伸填满 - 子项（
<img>或包裹它的<figure>）需设height: 100%，否则拉伸无效；若直接作用于<img>，还需加object-fit: cover防止变形
用 grid-auto-rows: minmax(min-content, 1fr) 实现“等高行+自适应内容”
如果图片墙需**多行都保持统一高度（如每行都高 200px）**，同时允许内容溢出或裁剪，可用：
-
grid-auto-rows: minmax(200px, 1fr)—— 每行最小高 200px，有空间时可撑开（适合图文混合） - 或
grid-auto-rows: 200px—— 强制每行固定高，此时align-items: stretch会让子项严格填满该高度 - 注意：固定行高下，图片需配合
object-fit: cover和width: 100%; height: 100%才能无白边、不拉伸
避免常见失效点：图片未真正“参与”高度计算
以下情况会导致 align-items: stretch 看似无效：
立即学习“前端免费学习笔记（深入）”；
-
<img>是替换元素，默认vertical-align: baseline，可能产生底部间隙；建议设vertical-align: top或用块级容器包裹 - 子项设置了
min-height或height固定值，会覆盖 stretch 行为；应优先用height: 100%配合父级 stretch - 图片异步加载完成前 DOM 高度为 0，导致 grid 行高塌陷；可预设
aspect-ratio（如aspect-ratio: 4/3）或用padding-top占位
补充：纯 CSS 不依赖 JS 的响应式图片墙骨架
一个兼顾移动端断点与等高效果的精简模板：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-auto-rows: 180px;
gap: 12px;
align-items: stretch;
}
.gallery img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
其中 auto-fill 自动适配列数，minmax(280px, 1fr) 保证最小宽度，grid-auto-rows: 180px 统一行高，align-items: stretch 驱动拉伸 —— 无需 JS，不依赖图片原始尺寸。
