直接用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))是起点，配合aspect-ratio、img的width/height/object-fit及网格gap三处控制才能防变形留白，缺一不可。
直接用 HTML 编辑器写纯 HTML + CSS 就能做出可靠响应式图片画廊，不需要任何“可视化拖拽”功能，也不依赖编辑器内置模板——关键在结构语义和三处 CSS 控制点是否写对。
为什么 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 是起点
这是目前浏览器原生支持、零 JS、不靠媒体查询就能自适应列数的最简写法。小屏自动退为一列，桌面自然铺开三到四列。但仅写这行 CSS 没用，它只分配列宽，不管图片怎么缩放、会不会变形或留白。
-
auto-fit会丢弃空轨道，让有图的列均分整行宽度；auto-fill则强制预留所有可能列位，小屏下容易右侧大片空白 - 别写成
minmax(280px, 300px)：硬上限会让窄屏卡死，只剩一列还带白边 - 别混单位，比如
minmax(30%, 1fr)—— 整条规则会被浏览器忽略 - iOS 15 及更早 Safari 对
1fr在minmax()中支持不稳定，可加-webkit-前缀或降级为minmax(280px, max-content)
图片不变形必须配齐三层样式
Grid 只管轨道，图片拉伸、压扁、上下留白，全是子项没约束导致的。漏掉任意一层，布局就不可靠。
- 每张图的直接父容器（如
<figure class="gallery-item"></figure>）必须设aspect-ratio: 4/3（或你图的实际比例），不能写在<img>上 - 该容器内
<img>必须写width: 100%+height: 100%+object-fit: cover；只写width: 100%+height: auto无法控制高度，旧版 Safari 尤其容易失效 - 网格父容器（如
<div class="gallery">）必须设 <code>gap: 1rem（不是margin），否则列数切换时外边距合并会导致视觉跳动语义结构不能省，
<figure></figure>是刚需用
<div> 套 <code><img>看似能跑通，但会丢失可访问性、影响 SEO、且后续加灯箱或懒加载逻辑时难扩展。-
<figcaption></figcaption>必须是<figure></figure>的直接子元素，不能嵌套在<p></p>或<div> 里 <li>图片无说明时，<code><figcaption></figcaption>可省略，但不要留空标签 - 别给
<figure></figure>设固定宽高（如width: 300px），否则破坏响应式缩放逻辑 - 如果编辑器自动插入
<div> wrapper，手动删掉，确保 <code><figure></figure>是网格直接子项常见错误现象与定位线索
调试时看到布局跳变、图片错位、右边大片空白，大概率不是 Grid 写错了，而是上下文缺了关键样式。
- 小屏下只显示一列、右边大片空白 →
minmax()第一个值设太大（如300px），iPhone SE 实际可用宽度约 340px，减去 gap 和边距后根本塞不下两列 - 图片被压扁或高度突兀拉长 → 没给
<figure></figure>设aspect-ratio，或<img>漏了height: 100%和object-fit - 加载时布局跳动（CLS）→
<img>标签没写 HTML 属性width和height，浏览器无法预留空间 - Safari iOS 15 及更早旋转屏幕后列数不更新 → 需监听
resize事件并强制重绘，或加will-change: transform
最易被忽略的是：以为写了
minmax(280px, 1fr)就万事大吉，却没意识到aspect-ratio必须作用于容器而非图片本身，且该容器还得是<img>的直接父级。 - 小屏下只显示一列、右边大片空白 →
-
