图片加载抖动的本质是img未预留尺寸导致重排，解决核心是让容器预先占据与最终一致的确定尺寸；推荐用aspect-ratio+object-fit，兼容性不足时用padding-top伪元素fallback，并需协同grid track定义。
图片加载抖动的本质是尺寸未预留
Grid 布局中图片一加载就“跳一下”，不是 Grid 本身的问题，而是 <img> 在自然流中没有宽高时会先占位 0×0 或默认内联尺寸，等图片加载完成、浏览器解析出真实尺寸后才重绘——这个重排（reflow）导致网格项尺寸突变，整个 grid track 被重新计算，视觉上就是抖动。
解决核心只有一条：让图片容器（或图片自身）在加载前就占据**确定的、与最终一致的尺寸空间**。Grid 的 grid-template-rows 和 grid-template-columns 本身不接管子元素内容尺寸，所以必须配合显式尺寸控制。
用 aspect-ratio + object-fit 稳住图片容器
CSS aspect-ratio 是目前最干净的方案，它让容器按比例预留空间，且不依赖图片是否加载。搭配 object-fit 可确保图片缩放不拉伸。
-
aspect-ratio接受数值（如4 / 3）或关键字（auto），推荐写死比例，避免依赖图片原始宽高 - 必须作用在图片的**直接父容器**上（比如
<div class="card"><img></div>中给.card设aspect-ratio） -
img自身设width: 100%; height: 100%; object-fit: cover;，否则可能溢出或留白 - 注意兼容性：
aspect-ratio在 Chrome 88+、Firefox 89+、Safari 15.4+ 支持；旧版需 fallback
.grid-item {
aspect-ratio: 4 / 3;
}
<p>.grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}fallback 方案：padding-top 百分比占位
对不支持 aspect-ratio 的环境（如老版 Safari 或 IE），用伪元素 + padding-top 模拟比例盒。关键点在于：padding 百分比基于**父容器宽度**计算，所以要确保父容器宽度确定（Grid 列宽已定义）。
立即学习“前端免费学习笔记（深入）”；
- 容器设
position: relative，伪元素设padding-top: 75%（对应 4:3）并position: absolute - 图片设
position: absolute覆盖整个容器，再用object-fit控制显示 - 必须禁用图片默认的
vertical-align: baseline，否则底部可能留缝隙
.aspect-box {
position: relative;
width: 100%;
}
.aspect-box::before {
content: "";
display: block;
padding-top: 75%; /* 4:3 */
}
.aspect-box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}Grid track 定义要配合内容预期
即使容器尺寸稳了，如果 grid-template-rows 写成 auto 或 minmax(auto, 1fr)，依然可能因字体渲染、行高变化等引发微小抖动。尤其当图片下方有标题文字时，文字换行时机也会影响高度。
- 对固定比例图卡，建议 track 用
minmax(0, 1fr)或具体值（如200px），避免auto回退到内容尺寸 - 若用
fr单位，确保所有同列项有统一比例，否则不同图片比例会导致行高不一致 - 慎用
align-items: start—— 它会让内容顶部对齐，但底部不齐，视觉上仍有“浮动感”；改用stretch（默认）更稳
真正容易被忽略的是：抖动往往不是单点问题，而是 aspect-ratio + grid-template-rows + object-fit 三者没对齐。比如容器设了 aspect-ratio: 16/9，但 grid 行高却是 minmax(100px, auto)，那在窄屏下仍可能压缩变形。
