auto-fill比auto-fit更适合画廊布局，因其按minmax最小值预占列位、保持网格骨架稳定；需配齐容器比例、图片拉满、间隙响应三要素，否则易塌陷错位。
直接用 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) 就能跑通，但必须配齐容器比例、图片拉满、间隙响应三要素，否则画廊会塌、错位、跳动或拉伸变形。
为什么 auto-fill 比 auto-fit 更适合画廊对齐
画廊最后一行常只剩几张图，auto-fit 会把空列合并，导致剩余图片被横向拉宽——尤其混着 4:3 和 1:1 图片时，变形明显；auto-fill 则按 minmax() 最小值（如 250px）预占所有可能列位，空列保留，网格骨架稳定。
-
auto-fill：列数 =floor(容器宽度 ÷ 最小宽度)，适合动态增删图、hover 动画、需要视觉节奏统一的场景 -
auto-fit：列数相同，但空列被压缩，适合静态内容密度优先的仪表盘类布局 - 别混用
repeat(auto-fill, minmax(250px, 1fr))和justify-content: center——空列存在会导致整体偏移
aspect-ratio 必须写在容器上，不是 <img>
object-fit: cover 只管“怎么填”，不定义“容器多高”。浏览器（包括 Safari 16.4+）不支持对 <img> 直接设 aspect-ratio，它只识别块级容器。
- 正确结构：
<div class="gallery-item"><img src=""></div> .gallery-item { aspect-ratio: 4/3; overflow: hidden; }-
<img>必须同时有width: 100%和height: 100%，缺一不可，否则object-fit不生效 - 别用
object-fit: fill——强制拉伸破坏比例；也别用contain——留白影响画廊主视觉
gap 用 clamp() 才真响应，不用媒体查询
固定 gap: 1rem 在小屏上占比过大，纯百分比又不被支持。clamp() 是目前最轻量可靠的方案。
- 推荐写法：
gap: clamp(0.5rem, 2vw, 1rem)——小屏最小 0.5rem，中屏随视口缩放，大屏封顶 1rem - 别单独设
row-gap或column-gap，除非你明确需要行列间距不同；统一用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事件再重排——太晚，用户已看到跳动
真正卡住多数人的不是 Grid 语法本身，而是容器没宽高参照、图片没包裹层、gap 没随视口缩放这三点。一旦漏掉任一环，画廊就从“优雅响应”变成“随机崩坏”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
