css grid 用 auto-fit + minmax() 实现自动列数适配，配合 gap 控制间距、aspect-ratio 防变形、figure 语义化布局、onerror 降级、srcset/sizes 响应式图片及 viewport 元标签。
用 CSS Grid 实现自动列数适配，别碰 flex-wrap
flex-wrap 布局在图片尺寸不一致或动态加载时容易断行错位，最后一行留白、间隙不均是常态。Grid 的 auto-fit + minmax() 才是稳定解。
-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))是核心写法：每列最小 250px，容器够宽就自动加列，填满整行 - 必须用
gap控制间距，别用margin模拟——否则网格对齐逻辑会崩 - IE 不支持
gap？改用grid-column-gap和grid-row-gap（IE10+ 可用） - 若图片宽高比差异大，统一加
aspect-ratio: 4/3或套一层div并设overflow: hidden防拉伸变形
figure + inline-block 是图文并排的稳妥方案
直接把 figcaption 跟 img 并列写，它会强制换行——因为 figcaption 默认是块级元素。语义化又不破布局，得靠包装和 display 控制。
- 每个图单元用
figure包裹img和figcaption，保证 HTML 语义正确 - 设
.gallery-item { display: inline-block; width: 100%; vertical-align: top; }，比display: contents兼容性更好（Safari 旧版不支持后者） - 标题文字居中？内部用
display: flex; flex-direction: column;+justify-content: center; - 操作按钮（删除/下载）用绝对定位：
position: absolute; top: 8px; right: 8px;，父figure得加position: relative;
图片加载失败时快速定位 + 降级显示
开发阶段光靠 alt 看不出是路径错还是真没图，得靠 JS 监控和控制台技巧补位。
- 单张图加
onerror="this.src='placeholder.svg'; this.title='加载失败: '+this.src;" - 批量处理用：
document.querySelectorAll('img').forEach(img => img.addEventListener('error', e => { /* 逻辑 */ })); - 开发时快速扫雷：在控制台运行
Array.from(document.images).filter(i => i.naturalWidth === 0)，立刻列出所有加载失败的img元素 - 路径统一用相对路径，从 HTML 文件所在目录起算；避免混用
./images/和images/，容易因入口 HTML 位置变化而失效
响应式图片资源本身要适配设备像素比
只写 <img src="photo.jpg"> 是静态加载，无法根据屏幕密度选最优图。真正响应式得靠 srcset + sizes 组合驱动浏览器决策。
-
srcset提供多尺寸源："small.jpg 480w", "medium.jpg 768w", "large.jpg 1200w" -
sizes告诉浏览器“这张图在不同断点下占多宽”：sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" - 浏览器结合当前视口宽度 + 设备 dpr（比如 iPhone 14 是 3x），从
srcset中挑出最匹配的资源 - 不要漏掉
<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则sizes计算基准会错
实际项目里最容易被忽略的是 sizes 的写法和 viewport 元标签的缺失——这两项一错，srcset 就形同虚设；还有就是用 margin 代替 gap 导致 Grid 列宽计算偏移，调试时很难一眼看出原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
