最可靠的响应式图片画廊布局是grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，它原生支持、无需js或媒体查询，auto-fit能动态均分有内容的列宽，避免空轨道留白；必须为figure设aspect-ratio和overflow:hidden，img需width:100%;height:100%;object-fit:cover；语义结构须用figure包裹img和figcaption，确保可访问性与seo。
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 是目前最可靠、零 JS 的响应式图片画廊布局起点。它不依赖媒体查询，也不靠 JavaScript 计算列数，浏览器原生支持，小屏自动退为单列，大屏自然铺开。
为什么用 auto-fit 而不是 auto-fill？
画廊是内容驱动型布局，你无法预知用户看到的是 1 张还是 12 张图。auto-fit 会丢弃空轨道，让有图的列均分整行宽度；auto-fill 则强制预留所有可能列位，导致小屏下右侧大片留白，或单图被拉宽变形。
-
auto-fit：适合不确定数量的画廊，列宽随内容动态均分 -
auto-fill：适合固定槽位场景（如仪表盘），需严格控制子项数量 - DevTools Layout 面板勾选 “Show line numbers”，能直接看到哪些轨道被 auto-fit 合并了
图片容器必须设 aspect-ratio，不能只写 width: 100%
Grid 只分配列宽，不管高度。没设 aspect-ratio 的容器，高度由图片原始尺寸撑开，高矮不一的图会导致整行被顶高、错位、跳动（CLS）。
- 在
<figure class="gallery-item"></figure>上写aspect-ratio: 4/3（或你图的实际比例） - 同时加
overflow: hidden，防止object-fit: cover失效时溢出 -
<img>内部必须写width: 100%; height: 100%; object-fit: cover;—— 只写height: auto不生效 - 旧浏览器兜底：用
padding-top: 75%+position: relative+ 绝对定位子元素
gap 是唯一安全的间距控制方式
用 margin 控制图片间距，在列数切换时极易错位：比如从三列变两列，某些 margin-right 会突然变成外边距合并源，视觉上“跳一下”。
- 网格父容器统一设
gap: 1rem（不要写成gap: 1rem 1rem，简写已足够） -
minmax()第一个值建议比目标图宽小 10–20px（如图宽 250px，写minmax(230px, 1fr)），为gap留余量 - 别给
<figure></figure>设固定宽高，否则破坏响应式缩放逻辑
语义结构不能省：<figure></figure> 必须包裹 <img> 和 <figcaption></figcaption>
直接用 <div> 套 <code><img> 会丢失语义，影响可访问性（屏幕阅读器无法建立图与文关联）、SEO，且不利于后续扩展灯箱或懒加载逻辑。
-
<figcaption></figcaption>必须是<figure></figure>的**直接子元素**，不能放在外层<div> 里 <li>无说明文字时可省略 <code><figcaption></figcaption>，但不要留空标签 - 每张图的
alt属性必须有意义，不能是 “image1.jpg”
最易被忽略的点是：把
aspect-ratio 直接加在 <img> 标签上。CSS 规范要求它在替换元素上需配合 height: 100% 才稳定生效，而多数人只写了 width: 100%，结果比例控制完全失效。
