用 auto-fill 实现响应式画廊更稳妥，因其保留空列维持对齐；aspect-ratio 必写在容器而非 img 上；gap 推荐 clamp(0.5rem, 2vw, 1rem)；每个项目需设 min-height 并为 img 提供 width/height 属性防跳动。
直接用 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) 就能撑起响应式画廊骨架，但只写这行会塌、会拉伸、会错位——关键在容器、图片、间隙三者必须协同约束。
为什么 auto-fill 比 auto-fit 更适合画廊对齐
画廊最后一行常需留空列保持网格对齐（比如四列布局下只有三张图），auto-fill 会预占所有满足 minmax() 的列位，空列保留；而 auto-fit 会合并空列，导致最后一行图片被横向拉伸变形。
-
auto-fill：适合固定视觉节奏的画廊，如作品集、商品列表 -
auto-fit：适合内容密度优先的场景，如仪表盘卡片，但需配合justify-content: start防止撑满 - 别混用：
repeat(auto-fill, minmax(250px, 1fr))和justify-content: center会因空列存在导致整体偏移
aspect-ratio 必须写在容器上，不是 <img>
object-fit: cover 只管“怎么填”，不管“容器多高”。如果直接给 <img> 设 aspect-ratio，多数浏览器（包括 Safari 16.4+）不识别——它只接受块级容器。
- 正确结构：
<div class="gallery-item"><img src="..."></div>，然后设.gallery-item { aspect-ratio: 4/3; overflow: hidden; } -
<img>必须同时有width: 100%和height: 100%，缺一不可，否则object-fit不生效 - 旧浏览器 fallback：用
padding-top: 75%+position: relative+absolute定位图片，但 2026 年已非必需
gap 用 clamp() 才真响应，不用媒体查询
固定 gap: 1rem 在小屏上占比过大，纯 % 值又不被支持。用 clamp() 是目前最轻量可靠的方案。
- 推荐写法：
gap: clamp(0.5rem, 2vw, 1rem)—— 小屏最小 0.5rem，中屏随视口缩放，大屏封顶 1rem - 别用
row-gap/column-gap单独设，除非你明确需要行列间距不同；统一用gap更稳定 - 如果父容器有
padding，确保gap值与之协调，否则边缘留白不一致（例如padding: 1rem+gap: 1rem= 视觉上 2rem 边距）
图片加载前防跳动的两个硬性条件
懒加载或网络慢时，<img> 高度为 0，网格行高塌陷，后续图片全部错位——这不是样式问题，是 DOM 渲染时机问题。
- 每个
.gallery-item必须设min-height: 150px（或略大于你设定的aspect-ratio对应高度） - HTML 中给
<img>加loading="lazy"同时，务必提供width和height属性（如width="800" style="max-width:90%"），让浏览器提前预留空间 - 别依赖 JS 监听
load事件再加 class 补高——图片失败时逻辑中断，整个画廊崩掉
真正卡住人的从来不是 Grid 语法，而是容器尺寸、图片尺寸、加载时机三者的耦合。把 aspect-ratio 控制权交给容器，把 gap 交给 clamp()，把高度兜底写死在 HTML 属性里——这三件事做完，画廊就稳了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
