grid-gap不能直接用在图片上，必须作用于图片父容器且设display: grid或flex；IE不支持需用margin降级；现代浏览器中flex+gap可靠，但需开启flex-wrap: wrap；Grid中gap额外增加空间，应配合minmax()和box-sizing避免溢出。
grid-gap 能不能直接用在图片上
不能直接用——grid-gap 只对 display: grid 容器生效，如果你把 gap 写在单张 <img> 标签上，完全没效果。必须作用于图片的父容器。
常见错误是给图片本身加 gap，或者忘了设 display: grid，结果间距毫无反应。
- 确保父容器有
display: grid -
gap值支持单位：px、rem、%（注意：%在 Grid 中按网格轨道间隙计算，不是相对于父宽） - IE 不支持
gap（哪怕加了-ms-前缀也没用），需要降级方案时得用margin模拟
flex gap 实现图片间距是否可靠
现代浏览器中非常可靠，display: flex + gap 已在 Chrome 104+、Firefox 103+、Safari 14.1+ 全面支持，且行为比 Grid 更直观：它只在相邻 flex 项之间插入空白，不会影响首尾外边距。
但要注意 flex 的流式特性——默认一行排不完会换行，而 flex-wrap: wrap 是必须开的，否则所有图片强行挤在一行，gap 看似存在，实际被溢出隐藏或撑破容器。
立即学习“前端免费学习笔记（深入）”；
- 必须设置
flex-wrap: wrap才能多行显示 -
gap在 flex 中不触发 margin 合并问题，比手动写margin-right/bottom干净得多 - 避免对 flex 项（即
<img>）设width: 100%又不控制父容器宽度，否则可能因小数像素导致换行错乱
怎么让 grid gap 和图片尺寸配合不溢出
Grid 的 gap 是额外增加的空间，不占用轨道定义。如果用 grid-template-columns: repeat(3, 1fr)，那三列总宽 = 3 ×（每列内容宽）+ 2 × gap，很容易超容器宽度。
安全做法是用 minmax() 配合 auto-fit，让列数自适应，同时用 box-sizing: border-box 统一图片盒模型。
img {
width: 100%;
height: auto;
display: block;
box-sizing: border-box;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 12px;
}
-
minmax(250px, 1fr)保证每张图至少 250px 宽，又能在空间充足时均分 - 不要给
img设固定height，否则会拉伸变形；用aspect-ratio（可选）或靠height: auto保比例 - 如果图片原始尺寸差异大，建议统一用
object-fit: cover+ 固定容器高来视觉齐整
gap 不生效？先检查这三件事
90% 的“gap 不起作用”问题都卡在这三个地方，比查文档快得多：
- 父元素没设
display: grid或display: flex——gap是布局属性，不是通用样式 - 子元素被设了
float、position: absolute或display: contents，导致脱离布局流，gap对它们无效 - 用了旧版属性名：
grid-gap已废弃，统一用gap；flex-gap不存在，只有gap（Flexbox 下也叫gap）
真正麻烦的是混合使用 margin 和 gap 的场景——比如某张图加了 margin-bottom，又套了 gap，结果间距翻倍还难调试。这种时候，要么全用 gap，要么全用 margin，别混。
