用 auto-fill 而非 auto-fit 更适合图片画廊，因其预占列保持对齐；图片不变形需三层控制：容器设 aspect-ratio、img 设 width/height 100% + object-fit: cover、父容器设响应式 gap；漏任一环将导致变形或留白。

直接用 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) 就能撑起响应式骨架，但只写这一行，90% 的画廊会变形、错位或留白——问题不在 Grid 本身，而在容器比例、图片约束和间隙控制没跟上。

为什么 auto-fill 比 auto-fit 更适合图片画廊

画廊最后一行常有空位，auto-fill 会预占所有满足 minmax() 的列，保持网格对齐；auto-fit 则合并空列，导致剩余图片被横向拉伸（尤其当图宽高比不一致时）。

• auto-fill：列数 = floor(容器宽度 ÷ 最小宽度)，结构稳定，适合动态增删图片或 hover 动画
• auto-fit：适合内容密度优先的静态卡片布局，但需配合 justify-content: start 防止撑满
• 别混用 auto-fill 和 justify-content: center，空列存在会导致整体偏移

图片不变形必须配三层控制

Grid 只分配轨道，不管图片怎么缩放。漏掉任意一层，就会压扁、拉长或上下留白。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 每张图的直接父容器（如 <div class="gallery-item">）必须设 <code>aspect-ratio: 4/3（或你实际需要的比例），写在 <img> 上无效
• 该容器内的 <img> 要同时写 width: 100% 和 height: 100%，再加 object-fit: cover；只写 width: 100%; height: auto 会失高
• 网格父容器（如 .gallery）必须设 gap，推荐 gap: clamp(0.5rem, 2vw, 1rem)，小屏不挤、大屏不空

常见错误现象与修复点

调试时看到布局跳变、右边大片空白、图片错位，大概率不是 Grid 写错了，而是上下文缺了关键样式。

• 小屏下只显示一列、右边大片空白 → minmax() 第一个值设太大（如 300px），iPhone SE 实际可用宽度约 340px，减去 gap 和边距后根本塞不下两列
• 图片被压扁或高度突兀拉长 → 没给容器设 aspect-ratio，或 <img> 漏了 height: 100% 和 object-fit
• 加载时布局跳动（CLS）→ <img> 标签没写 HTML 属性 width 和 height，浏览器无法预留空间
• Safari iOS 15 及更早旋转屏幕后列数不更新 → 需监听 resize 事件并强制重绘，或加 will-change: transform

兼容性与降级要点

旧版 Safari（iOS 15 及更早）对 1fr 在 minmax() 中支持不稳定，且 clamp() 在 Safari 15.4+ 才完整支持。

• 可为 minmax() 加 -webkit- 前缀，或降级为 minmax(250px, max-content)（但后者易溢出）
• gap 降级方案：用固定值 gap: 0.75rem，避免依赖 clamp()
• 图片加载防跳动硬性条件：每个 .gallery-item 设 min-height（如 150px），且 <img> 必须带 width 和 height 属性

最易被忽略的是：以为写了 minmax(250px, 1fr) 就万事大吉，却没意识到 aspect-ratio 必须作用于容器而非图片本身，且该容器还得是 <img> 的直接父级。