应使用<figure>包裹<img>并用其直接子元素<figcaption>提供说明，配合CSS Grid的auto-fill与minmax()实现自适应画廊布局，同时通过srcset/sizes提供多分辨率图片资源。
用 <figure> 和 <figcaption> 组织每张图片的语义结构
单张图片在画廊中不是孤立元素，而是有明确上下文的内容单元。直接用 <img> 套 <div> 会丢失语义，影响可访问性和 SEO。必须用 <figure> 包裹 <img>，标题或说明文字用 <figcaption>，且它必须是 <figure> 的**直接子元素**。
常见错误是把 <figcaption> 放在 <figure> 外、或用 <p> 替代——这会让屏幕阅读器无法建立图与文的关联。
-
<figure>是流内容容器，天然支持 flex/grid 布局，无需额外 wrapper - 如果图片无说明，
<figcaption>可省略，但不要留空标签 - 避免给
<figure>设固定宽高，否则会破坏响应式缩放逻辑
用 grid-template-columns: repeat(auto-fill, minmax(...))) 实现自适应列数
CSS Grid 是目前最可控的响应式画廊布局方式，比 float 或 inline-block 更可靠。关键不是写媒体查询，而是用 auto-fill + minmax() 让浏览器自动计算列数。
例如：grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 表示：每列最小 280px，最大占满剩余空间，容器能塞几列就几列。280px 是移动端单列的合理下限，可根据实际图片最小可读尺寸调整。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
auto-fit也可，但它会合并空轨道，对画廊效果和auto-fill几乎一致，但语义稍弱 - 避免写死列数如
repeat(3, 1fr)，否则小屏上图片会被强行压缩 - 配合
gap控制间距，别用margin，否则在不同行列数下易错位
为 <img> 设置 width: 100% 和 height: auto 防止拉伸变形
即使父容器（<figure>）已响应式缩放，<img> 默认仍按原始尺寸渲染，可能溢出或留白。必须显式约束其尺寸行为。
只设 width: 100% 不够——某些浏览器（如旧版 Safari）在 flex/grid 子项中可能忽略它。必须搭配 height: auto 才能保持宽高比。
- 不要设
height: 100%，会导致图片被裁切或失真 - 避免用
object-fit: cover除非你明确需要裁剪；画廊通常应完整展示原图 - 如果图片加载慢，可用
aspect-ratio（现代浏览器）占位，例如aspect-ratio: 4/3，防止布局跳动
用 srcset 和 sizes 提供多分辨率图片资源
响应式画廊不能只靠 CSS 缩放，否则高 DPR 设备（如 iPhone）会加载过小图片再放大，模糊；低带宽设备又被迫下载大图。必须用原生响应式图片语法。
srcset 列出多个尺寸的图片地址，sizes 告诉浏览器“这张图在不同视口下大概占多宽”，浏览器据此选择最优资源。
- 示例：
<img src="photo-1x.jpg" srcset="photo-1x.jpg 1x, photo-2x.jpg 2x" sizes="(max-width: 768px) 100vw, 50vw"> -
sizes中的50vw表示桌面端每张图占视口一半宽度（对应两列），与 CSS grid 的列宽逻辑对齐 - 不加
sizes时浏览器默认按 100vw 选图，很可能选错
复杂点在于 sizes 值要和实际布局宽度严格匹配，哪怕差 10vw，都可能导致高清屏加载 1x 图。这点最容易被忽略。
