auto-fit + minmax(250px, 1fr) 是唯一可靠组合：auto-fit 合并空轨道实现列数自适应，minmax 下限保图不压缩、1fr 保证均分剩余空间，配合语义化 figure、aspect-ratio 容器与 object-fit 图片控制，才能实现真正响应式画廊。
直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 就能实现真正响应式的列数变化，不需要媒体查询、不依赖 JavaScript，但必须配齐三层结构：语义化容器、比例约束、图片缩放控制——漏掉任何一层，画廊就会错位、拉伸或留白。
为什么 auto-fit + minmax(250px, 1fr) 是唯一可靠组合
写死列数（如 repeat(3, 1fr)）在小屏上会强制压缩图片；auto-fill 会预占空列，导致最后一行只有一张图时右边大片空白；而 auto-fit 会自动合并无内容的轨道，让有图的列均分容器宽度。
-
minmax(250px, 1fr)中的250px是底线：iPhone SE 屏宽 375px，减去左右 padding 和gap后刚好容下 1 列 - 写成
minmax(250px, 300px)会卡死弹性，小屏下要么溢出、要么留白 -
1fr不是固定值，而是参与剩余空间分配的信号；混用2fr或%会让列宽比例失控 - 旧版 Safari 对
minmax(px, fr)支持弱，可加-webkit-前缀，或降级为minmax(250px, max-content)（但后者易撑破容器）
<figure></figure> 必须包裹 <img>，且 <figcaption></figcaption> 是直接子元素
用 <div> 包图片会丢失语义，影响可访问性与 SEO；把 <code><figcaption></figcaption> 放在 <figure></figure> 外或用 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 替代，屏幕阅读器就无法建立图与文的关联。
-
<figure></figure>是流内容容器，天然支持 Grid 布局，无需额外 wrapper - 无说明文字时可省略
<figcaption></figcaption>，但不要留空标签（如<figcaption></figcaption>） - 避免给
<figure></figure>设固定宽高，否则破坏响应式缩放逻辑 - 每张图的容器建议加 class，如
<figure class="gallery-item"></figure>，方便后续加aspect-ratio
图片不变形的关键：容器设 aspect-ratio，<img> 用 object-fit
只给 <img> 写 width: 100%; height: auto 不够——Grid 分配的是列宽，高度由图片原始尺寸撑开，不同高矮的图会导致整行被顶高、下一行错位。
- 在
<figure class="gallery-item"></figure>上设aspect-ratio: 4/3（或你图的常见比例），再加overflow: hidden -
<img>内部必须写width: 100%; height: 100%; object-fit: cover;—— 缺少height: 100%，object-fit就不生效 - 旧浏览器不支持
aspect-ratio？可用padding-top: 75%+position: relative+ 绝对定位子元素兜底 - 别在
<img>上单独设height，否则各行高度不一致，网格对齐全乱
别让 gap 和懒加载毁掉布局稳定性
gap 是 Grid 唯一安全的间距控制方式；loading="lazy" 在瀑布流里容易引发 CLS（布局偏移），但在标准 Grid 画廊中只要配好 aspect-ratio 就不会跳动。
- 用
margin控制间距会塌陷、错位，尤其在首尾和行列交界处 -
gap: 1rem同时控制行距列距，别为了“视觉等距”调小它来补偿父容器的padding - 图片加载慢？HTML 属性
width和height（非 CSS）能预留空间，防止跳动 - 如果用了
srcset，确保sizes准确反映图片在各断点下的显示宽度，否则高 DPR 设备会加载模糊图
最常被忽略的是：Grid 只分配轨道，不管内容怎么撑。哪怕 grid-template-columns 写得再准，只要 <figure></figure> 没设 aspect-ratio、<img> 没配 height: 100% 和 object-fit，画廊照样错位变形。
