最稳的图片网格解法是 CSS Grid：用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 实现自适应列数，gap 控制间距，aspect-ratio + object-fit 防变形，figure 语义化结构，srcset + sizes 真响应式。
用 display: grid 做基础网格，别碰 flex-wrap
图片网格最稳的解法是 CSS Grid，不是 Flexbox。Flex 的 flex-wrap 在图片尺寸不一致、异步加载或浏览器重排时，容易断行错位、最后一行留白、列宽不均——这不是 bug，是 flex 一维布局的天然限制。
Grid 是二维控制，能真正“填满整行”，且列数随容器宽度自动增减：
-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))—— 每列最小 250px，够宽就加列，不够就收缩到 1fr - 必须用
gap控制间距，别用margin模拟，否则网格对齐逻辑会崩（尤其在justify-items: center下） - IE10+ 兼容写法：用
grid-column-gap和grid-row-gap替代gap
aspect-ratio 防拉伸变形，object-fit 控制裁剪方式
原始图片宽高比不一致？直接设 width: 100%; height: 100% 会拉伸变形。正确做法分两层：
- 容器层（如
figure或div）设aspect-ratio: 4/3（或你想要的比例），强制保持宽高比 - 图片层设
object-fit: cover（居中裁剪）或contain（完整显示留白） - 旧版 Safari 不支持
aspect-ratio？套一层div+padding-top: 75%（4:3 对应 75%）模拟
语义化结构用 figure，别裸写 img
每张图配标题/说明时，别把 figcaption 和 img 并列塞进 div 里——figcaption 默认块级，会强制换行破坏网格流。
立即学习“前端免费学习笔记（深入）”；
标准写法是：
<figure> <img src="photo.jpg" alt="描述"> <figcaption>这是标题</figcaption> </figure>
-
figure天然语义正确，利于 SEO 和屏幕阅读器 - 给
figure加position: relative，方便内部按钮（如下载、删除）用position: absolute定位 - 避免用
display: contents包裹figure——Safari 旧版不支持，推荐用display: inline-block; width: 100%
srcset + sizes 才算真响应式，单靠 src 是假的
只写 <img src="photo.jpg"> 是静态加载，不管设备像素比（dpr）和视口宽度。真正适配得靠浏览器自己选图：
-
srcset提供多尺寸源：srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" -
sizes告诉浏览器“这张图在不同断点下占多宽”：sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" - 开发阶段快速排查加载失败：
Array.from(document.images).filter(i => i.naturalWidth === 0)直接列出所有没加载成功的img - 路径统一用相对路径，从 HTML 文件所在目录起算；混用
./images/和images/容易因入口 HTML 位置变化而失效
复杂点在于 sizes 的表达式要和实际 CSS 布局严格对应，比如 Grid 中某列在 768px 断点下占 50vw，sizes 就得写 (max-width: 768px) 50vw，差一点，浏览器就可能选错图。
