auto-fill 比 auto-fit 更适合画廊对齐，因为 auto-fill 预占所有满足 minmax() 的列轨道、保留空列，避免最后一行图片被撑开变形；而 auto-fit 会合并空列导致布局错乱。
auto-fill 比 auto-fit 更适合画廊对齐，因为最后一行留空列时不会拉伸图片——这是多数人踩坑后才意识到的关键点。
为什么用 auto-fill 而不是 auto-fit
画廊常出现“最后一行只有 1–2 张图”的情况。如果用 auto-fit，浏览器会把空列合并，导致剩余图片被横向撑开、变形；而 auto-fill 会预占所有满足 minmax() 的列轨道，空列保留，网格对齐不崩。
常见错误现象：图片宽度忽大忽小、最后一行错位、hover 缩放后跳动。
使用场景：固定宽高比的卡片式画廊、需要严格列对齐的展示页。
参数差异：repeat(auto-fill, minmax(250px, 1fr)) 和 repeat(auto-fit, minmax(250px, 1fr)) 仅一字之差，视觉表现却完全不同。
aspect-ratio 必须写在容器上，不能写在 img 上
很多人给 img 直接加 aspect-ratio: 4/3，结果无效——因为 img 是替换元素，aspect-ratio 在它身上不触发渲染约束。
正确做法是把 aspect-ratio 设在每个画廊项（即 .gallery-item）上，再让 img 填满该容器。
容易踩的坑：只设 width: 100% 不设高度，导致 grid 行高塌陷；或用 height 固定值但没配合 object-fit，图片被裁错位置。
示例：
.gallery-item { aspect-ratio: 4/3; }.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
gap 推荐用 clamp() 而非固定值
固定 gap: 1rem 在小屏上显得太疏，在大屏上又太挤。gap: clamp(0.5rem, 2vw, 1rem) 能让间隙随视口平滑缩放，同时保底和封顶，避免极端缩放。
性能影响：clamp() 是 CSS 运行时计算，但现代浏览器已优化，无明显卡顿。
兼容性注意：IE 完全不支持，Edge 105+、Chrome 100+、Firefox 100+ 均可用；如需支持旧版，降级为媒体查询分段设置。
别用 margin 替代 gap：会破坏 grid 轨道逻辑，尤其在 auto-fill 下易引发最后一行对齐错乱。
每张图必须有 min-height 且容器不能依赖内容撑高
grid 行高默认由内容决定，如果某张图加载慢或失败，整行可能塌陷，引发布局跳动。
解决方案：.gallery-item 设 min-height: 0（防 flex/gird 收缩） + 显式 min-height（如 200px 或结合 aspect-ratio）；img 则必须设 width 和 height 为 100%，否则 object-fit 失效。
容易忽略的点：懒加载图片未设占位尺寸时，首屏渲染会抖动；服务端返回的图片宽高不一致时，仅靠 object-fit 不足以稳定布局。
建议组合：aspect-ratio + min-height + img { width: 100%; height: 100% } —— 三者缺一不可。
立即学习“前端免费学习笔记（深入）”；
实际项目里最常被跳过的，是aspect-ratio 和 min-height 的协同约束。单写一个，往往看不出问题；等上线后遇到不同尺寸图片混排、网络波动、字体加载延迟，才暴露跳动或错位。 
