如何制作一个响应式的图片画廊布局_利用CSS Grid与Auto-fill

auto-fill比auto-fit更适合画廊初稿，因其按minmax()最小值（如250px）预占等宽列位，空位保留、结构稳定；而auto-fit会拉伸有内容的列至1fr，导致尺寸不一的图片被强制变形。

直接用 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) + gap + aspect-ratio 就能跑通绝大多数场景，不用媒体查询，但必须包裹图片容器、不能只样式化 img 标签本身。

为什么 auto-fill 比 auto-fit 更适合画廊初稿

很多人一上来就抄 auto-fit，结果小屏下最后一张图被强行拉宽、变形严重——auto-fit 会把“有内容的列”拉伸填满整行，而画廊里每张图尺寸不一，它并不知道你想要的是“等宽格子”，而是盲目均分。相反，auto-fill 会按 minmax() 的最小值（比如 250px）尽可能多预占位，哪怕某行没填满，也保持列宽一致，后续靠 aspect-ratio 控制内部比例更可控。

• auto-fill：列数 = floor(容器宽度 ÷ 最小宽度)，空位保留，行为可预测
• auto-fit：列数相同，但会把实际存在的列拉伸到 1fr，容易让窄图变胖、高图被裁更多
• 如果你后端返回的图宽高比混乱（比如混着 16:9 和 1:1），先用 auto-fill 稳住网格结构，再统一加容器约束

minmax(250px, 1fr) 里的 1fr 不是“填满”，而是“上限”

1fr 在这里不是让每列都撑满剩余空间，而是告诉浏览器：“单列最多可以占到均分后的那一份”。真正列宽由容器总宽 ÷ 列数决定。所以你设 minmax(300px, 1fr) 却在手机上只看到 1 列留大片空白，问题不在 1fr，而在 300px 太大——iPhone SE 屏宽才 375px，减去左右边距和 gap，根本塞不下两列。

• 保守起见，手机横屏最小宽度建议设 250px，平板可用 320px，桌面再往上提
• 别写 minmax(250px, 2fr) 或更大，2fr 会让列宽翻倍，破坏自动换行逻辑
• 确保父容器有明确宽度（如 width: 100% 或 max-width），否则 Grid 无法计算列数

图片不变形的关键不在 img，而在它的父容器

只给 img 写 width: 100%; height: auto; 是无效的——Grid 分配的是格子宽度，高度由内容撑开，一旦图高矮不一，整行就会被最高那张图顶高，下面的行就错位。真正起作用的是给每个图片项（比如 <figure> 或 <div class="gallery-item">）加 aspect-ratio。

立即学习“前端免费学习笔记（深入）”；

• 必须用容器元素包裹 img，然后在该容器上设 aspect-ratio: 4/3（或你期望的比例）
• img 本身设 width: 100%; height: 100%; object-fit: cover;，否则 aspect-ratio 不生效
• 别依赖 img { max-width: 100% }，它只管宽度，高度自由伸缩，一缩就压扁
• Safari 旧版（iOS 15 及更早）可能缓存列数，旋转屏幕后不重算，加 resize 监听或强制触发重排可缓解

兼容性兜底要防“全跪”，不是“微调”

IE11 不支持 auto-fill、minmax()、aspect-ratio，强行 polyfill 成本高、效果差。与其花半天适配一个已淘汰的浏览器，不如用 @supports 干脆隔离：

gallery {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  gap: 1rem;}@supports not (display: grid) {  gallery { display: block; }  gallery > * { float: left; width: calc(33.333% - 1rem); margin-right: 1rem; }}

现代浏览器（Chrome 116+、Firefox、Safari 16.4+）已支持 grid-template-rows: masonry 实现瀑布流，但常规画廊仍推荐二维 Grid，因为语义清晰、对齐稳定——瀑布流本质是“放弃行对齐”，而多数设计需要的是整齐的网格基线。