auto-fit更适配图片墙，因其收缩空列并均分剩余空间，使小屏自动退为单列撑满；auto-fill则保留隐式列占位导致空白错位；minmax下限250px兼顾可读性与设备适配，图片不变形需容器居中+img仅设max-width/max-height+object-fit。
直接用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 就能撑满容器、自动换行、每列等宽——但前提是图片容器有明确 max-width，且图片本身不靠 width: 100% 强拉变形。
为什么 auto-fit 比 auto-fill 更适合图片墙
auto-fit 会收缩空列、把剩余空间分给现有项目；auto-fill 则保留所有隐式列占位，导致小屏下出现大量空白或边框错位。
实际效果差异明显：在 375px 宽的 iPhone 上，auto-fit 自动退为单列并撑满宽度；auto-fill 可能仍渲染出两列，第二列空着却占位，破坏对齐和阴影视觉。
- 图片墙需要“内容驱动列数”，不是“轨道数量固定”
- 当图片数量少于网格槽位时，
auto-fit让剩余项目自动扩展填满空间 - 若需保留边框/阴影对齐（比如卡片带统一外边框），才考虑
auto-fill+place-content: start控制对齐
minmax(250px, 1fr) 的取值怎么定
250px 不是 magic number，而是基于最小可读性与主流设备宽度测算出的稳妥下限：320px 屏（老款 iPhone）减去左右 gap（12px × 2）后，剩约 296px；设 250px 可留出足够内边距，又避免文字挤成一团。
- 低于 200px：图片缩得太小，文字标签难辨认
- 高于 280px：在 414px 宽设备上可能只显示一列，浪费空间
- 别用
minmax(200px, 250px)这类固定上限——它会卡死列宽，失去1fr的弹性伸缩能力 - 如果图片带标题文字，建议下限同步参考字体大小：16px 字在 250px 宽度下约可显示 12–15 个中文字符
图片不变形的关键三步
Grid 只排位置，不管图片怎么渲染。常见错误是给 <img> 直接写 width: 100%; height: 100%，结果强制拉伸糊掉或裁切。
- 图片容器（如
<figure></figure>或包裹<div>）设 <code>display: grid; place-items: center -
<img>本体只设max-width: 100%; max-height: 100%; object-fit: contain - 绝对不要给
<img>设固定height，否则破坏原始宽高比；若需统一样式高度，改用aspect-ratio: 4/3+object-fit: cover -
gap必须用px（如gap: 12px），禁用rem或em——iPhone SE 上1rem = 16px，两列之间只剩不到 20px 内容宽度 - 父容器务必加
max-width（如max-width: 1200px），否则在大屏上1fr无限扩张，单列超宽，图片被拉得稀疏无力
移动端必须调的两个细节
光靠 Grid 不能包打天下。实测发现，以下两点不手动干预，小屏体验会断层：
真正需要媒体查询的地方极少：仅当某尺寸下 minmax() 下限失效（比如 320px 屏撑不开 250px 列），才微调为 minmax(220px, 1fr)；其他一律交给 Grid 自动处理。
