gap在图片画廊中不起作用是因为它仅对flex和grid容器生效，若父容器未设display: flex或display: grid，则gap无效；推荐用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))配合gap实现自适应响应式布局。
gap 属性在图片画廊里为什么不起作用
因为 gap 只对 Flex 和 Grid 容器生效，如果你的图片还在 div 里用 float 或纯 display: inline-block 排列，加 gap 就是白搭。它不会自动“渗透”到子元素之间，必须明确让父容器变成 Grid 或 Flex。
- 检查父容器是否设置了
display: grid或display: flex - Flex 下
gap只控制主轴（flex-direction方向）间距；Grid 下才同时控制行列 - 旧版 Safari（≤15.4）不支持 Flex 的
gap，得用margin回退
用 grid-template-columns: repeat(auto-fit, minmax(...))) + gap 实现自适应列数
这是最稳的响应式图片画廊布局方案：列数随容器宽度自动增减，每张图最小宽度可控，gap 均匀分隔，不用媒体查询。
-
minmax(280px, 1fr)表示每列至少 280px，剩余空间平分——比固定280px更抗挤压 -
auto-fit会合并空列，auto-fill则保留空位，画廊推荐用auto-fit - 别写死列数如
repeat(4, 1fr)，否则小屏上图片会被强行压缩变形
gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
}
fr 单位和 px 混用时的常见错觉
fr 是“剩余空间分配权”，不是像素值。当你混用 1fr 200px 1fr，中间那列永远占 200px，两边平分剩下的所有空间——但很多人误以为它会“等比缩放”。
- 图片画廊里慎用
fr+ 固定宽高比（如aspect-ratio: 4/3），否则小屏下fr分到的空间太小，图片被压扁 - 如果要保图比例，优先用
minmax()设最小宽度，再配object-fit: cover控制裁剪 -
gap不参与fr计算——它是在网格轨道之外额外加的空白，不影响列宽分配逻辑
图片本身拉伸/模糊的真正原因不是 gap，而是 width/max-width 设置不当
很多人调完 gap 发现图片糊了，其实问题出在图片样式没跟上网格变化。Grid 只管布局，不管内容怎么渲染。
立即学习“前端免费学习笔记（深入）”；
- 必须给图片加
width: 100%和height: auto，否则它按原始尺寸溢出或留白 - 避免对图片设
max-width: 100%却漏掉height: auto，否则高度塌陷成 0 - 高 DPR 屏幕（如 Retina）下，用
image-set()或srcset提供多倍图，gap再细也救不了分辨率不足
复杂点在于：gap 值本身要随断点微调，但不能每个屏幕都写一遍媒体查询；更关键的是，图片加载时机、懒加载 placeholder 高度、以及 aspect-ratio 在旧浏览器的兼容 fallback，这些都会干扰 gap 的视觉一致性——得靠 CSS 自定义属性 + @supports 配合控制。
