auto-fill比auto-fit更适合画廊，因其保留空列维持网格结构稳定；minmax(250px,1fr)中1fr为事实标准，但需配合容器约束、图片包裹和clamp()响应式gap等关键措施。
直接用 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一起用会因空列存在导致整体偏移，慎用
minmax() 里写 1fr 是合法的，但得知道它实际怎么算
规范上 minmax() 的第二个参数应为长度单位（如 px、%），1fr 本不属于该范畴。但截至 2026 年，所有主流浏览器（包括 Safari 16.4+）都将其解释为“单列最大可占均分后的一份”，属于广泛支持的事实标准。
- 真正列宽 = 容器总宽 ÷ 实际列数，不是“最小 250px，最大撑满”
- 设
minmax(300px, 1fr)在 iPhone SE（屏宽 375px）上只剩 1 列，问题不在1fr，而在 300px 太大——减去gap和边距后已无空间塞第二列 - 手机横屏建议最小值设
250px，平板用320px，桌面再往上提 - 别写
minmax(250px, 2fr)，2fr 会让列宽翻倍，破坏换行逻辑
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 - 每个
.gallery-item必须设min-height: 150px（或略大于你设定的aspect-ratio对应高度） -
<img>标签必须带width和height属性（如width="800" style="max-width:90%"），让浏览器提前预留空间 - 别依赖 JS 监听
load事件再补高——图片加载失败时逻辑中断
最易被忽略的是：父容器没设 max-width 或没控制 padding，会导致大屏下画廊稀疏、边缘留白不一致；而图片未包裹容器、aspect-ratio 写错位置，会让整个网格行高失控——这些不是样式微调问题，是骨架级错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
