grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 能自动适配列数，因 auto-fit 按容器宽度“按需生成列”，最小宽250px为底线，1fr弹性均分剩余空间，并自动合并空列，避免最后一行拉伸或留白。
直接用 display: grid + auto-fit + minmax() 是当前最稳的解法，别碰 float、inline-block 或硬写媒体查询——它们在图片数量动态变化或宽高比不一时极易错位、留白、抖动。
为什么 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 能自动适配列数
这行 CSS 的本质是让浏览器“按需生成列”，而不是靠断点猜设备尺寸。最小宽度（如 250px）是底线，1fr 是弹性分配逻辑，auto-fit 会把空余列合并掉，避免最后一行只有一张图还撑满整行。
-
auto-fill会保留空轨道，适合需要占位的场景；auto-fit更常用，它压缩空列，真正实现“能放几列就放几列” - 如果设成
minmax(300px, 1fr)，那在 800px 宽容器里最多铺 2 列（300×2=600），剩下 200px 不够第三列，就不会强行加列 - IE11 不支持
auto-fit和minmax()，真要兼容就降级用display: flex; flex-wrap: wrap;+flex-basis: 250px;
图片高度不一致时怎么防拉伸和塌陷
原始尺寸差异大会导致网格单元格高度参差，视觉割裂，甚至触发布局抖动（尤其是懒加载后）。不能只靠 height: auto。
- 统一设固定高度 +
object-fit: cover：例如height: 200px; object-fit: cover;，裁两边保构图，适合封面类图片 - 用
aspect-ratio: 4/3（Chrome 103+、Firefox 98+ 支持）让容器自己维持比例，再配overflow: hidden防溢出；老浏览器 fallback 方案是伪元素撑开：::before { content: ""; display: block; padding-top: 75%; } - 千万别只写
width: 100%就不管高度——Flex/Grid item 默认min-width: auto，大图会撑破容器；加min-width: 0或width: 100%才能正常收缩
加载失败、网络差、DPR 高时怎么不出问题
用户看不到图，不是样式问题，是资源链路断了。控制台报 404 Not Found 或 naturalWidth === 0 就得立刻干预。
立即学习“前端免费学习笔记（深入）”；
- 路径必须用相对路径，从 HTML 文件所在目录起算；混用
./images/和images/是常见 404 根源 - 单图快速降级：
<img src="real.jpg" onerror="this.src='placeholder.svg'; this.title='加载失败';">；批量处理用document.querySelectorAll('img').forEach(...) -
srcset+sizes必须成对出现：只写srcset浏览器默认按100vw选图，大概率加载超大图；sizes="(max-width: 768px) 100vw, 50vw"才告诉浏览器“小屏下这张图占满视口，大屏只占一半”
真正难的不是写出能跑的代码，而是预判图片加载完成前的空白高度、不同 DPR 下的像素密度选择、以及 Safari 旧版对 gap 和 aspect-ratio 的静默忽略——这些点不提前占位、不监控、不 fallback，上线后用户手指一滑，页面就跳一下。
