用 repeat(auto-fit, minmax(250px, 1fr)) 可替代媒体查询实现响应式相册布局，但需同时设置容器宽度约束、父容器 aspect-ratio 和图片宽高覆盖三处关键样式，否则会导致拉伸、塌陷或留白错乱。
直接用 repeat(auto-fit, minmax(250px, 1fr)) 就能替代媒体查询，但必须配齐三处关键样式，否则图片会拉伸、塌陷或留白错乱。
为什么 auto-fit 比 auto-fill 更适合相册列表
相册列表要的是“填满可用空间”，不是“预留空位”。auto-fit 会合并未填充的轨道，让剩余图片自动撑开占满整行；auto-fill 则按 minmax() 预占所有可能列，导致最后一行出现大片空白——尤其在手机竖屏下只有一张图时，右边空出半屏是典型症状。
常见错误现象：
– 小屏下只显示一张图，但右侧留白严重 → 很可能误用了 auto-fill
– 图片高度突然变矮、文字被截断 → auto-fit 撑开了列宽，但行高没跟上
-
auto-fit适用于内容驱动的列表（如相册、商品卡），目标是视觉紧凑 -
auto-fill更适合模板化初稿或需要固定栅格节奏的布局（如后台仪表盘） - 两者对
grid-gap的计算逻辑一致，但轨道合并行为不同，不能混用测试
minmax() 里两个值怎么设才不翻车
minmax(250px, 1fr) 看似简单，但第一个值设大了小屏塞不下，设小了大屏太密；第二个值写成 1fr 1fr 或 min-content 会直接让 Grid 放弃响应式重排。
- 最小值必须是带单位的绝对长度（
250px可行，25%或auto会导致列数冻结） - 最大值推荐严格用
1fr，不要加空格或重复（1fr 1fr是语法错误，浏览器静默降级） - 建议最小值比目标图宽小 10–20px，为
gap留余量：目标图宽 250px，就写minmax(230px, 1fr) - iPhone SE 屏宽约 340px，减去左右 padding 和 gap 后，实际可用宽度常不足 300px，此时
minmax(280px, 1fr)就只能出 1 列
图片不变形的关键三步，漏一步都不行
CSS Grid 只分配空间，不管图片怎么缩放。很多人为图省事直接给 <img> 加 aspect-ratio，结果 Safari 下失效、加载时跳动、比例崩坏——这是因为 aspect-ratio 在替换元素上需配合显式高度才稳定生效。
- 给每张图的**直接父容器**（比如
<figure></figure>或<div class="photo-item">）设 <code>aspect-ratio: 4/3或1/1 - 该容器内的
<img>必须写width: 100%; height: 100%; object-fit: cover;（仅width: 100%; height: auto无法约束高度） - 网格容器本身设
gap，但别用margin模拟间隙，否则缩放时列宽计算会错乱 - 图片路径必须用相对路径（如
./photos/01.jpg），且带alt和loading="lazy"，否则 SEO 和无障碍访问直接丢分 - 网格容器必须有明确宽度上下文，比如
width: 100%+max-width: 1200px - 如果父容器是
display: block且无宽度约束，Grid 会按视口全宽计算1fr，导致单列无限宽 - 别把图片塞进
background-image：这样object-fit、alt、loading全失效，Grid 也拿不到真实尺寸信息 - 旧版 Safari（aspect-ratio，需用
padding-bottomhack 回退，但必须确保父容器position: relative
容易被忽略的容器宽度限制
很多人写了 repeat(auto-fit, minmax(250px, 1fr)) 却发现大屏下单图巨宽、文字被压扁——问题不在 Grid，而在外层容器没设限。
真正难的不是写对那行 grid-template-columns，而是让每张图在加载前后都守着同一套比例规则——这要求容器、图片、网格三层样式严丝合缝，缺一不可。
