直接用gap就能搞定图片画廊间距，因gap是网格原生属性，只作用于相邻轨道间，不触发重排、不塌陷；而margin易在首尾/行列交界处漏空隙，还需额外清除。
直接用 gap 就能搞定图片画廊的间距，grid-gap 是过时写法，别再用了。
为什么 gap 比 margin 更适合控制画廊项间距
gap 是网格原生属性，只作用于相邻网格项之间，不触发重排、不塌陷、不依赖子元素 display 类型；而用 margin 模拟间距，容易在首尾/行列交界处漏掉空隙，还得额外清除。
- 给
.gallery-grid设gap: 12px，所有行距列距自动统一 - 若子项自己带
margin，会和gap叠加，导致实际间距变大——建议子项margin: 0 - 旧版 Safari（≤14.1）可能忽略
gap: 1rem或gap: calc(1vw + 8px)，稳妥起见用px或vh - 嵌套 grid 时，
gap只对直接子项生效；如果中间包了<div class="wrapper">，那 <code>gap就卡在 wrapper 层，真正的图片项不受控gap不生效？先检查这三件事常见失效不是语法错，而是布局上下文没配对。
- 父容器必须是
display: grid或display: inline-grid；设成flex或block时gap完全无效 - 别在子项上写
gap——它只属于容器，子项写等于白写 - 用开发者工具看 computed style，确认
display真是grid，且没被!important覆盖或前缀干扰（如只写了-ms-grid却没配 IE 专用 gap）
响应式画廊中如何动态调
gap不要试图用
rem或百分比让gap自适应缩放，兼容性差且不可控。正确做法是媒体查询分段切换。- 小屏（
max-width: 767px）：设gap: 8px，避免密集感过强 - 中屏（
768px–1199px）：设gap: 12px，平衡留白与信息密度 - 大屏（
min-width: 1200px）：设gap: 16px，配合更大卡片尺寸提升呼吸感 - 别为了“视觉等距”把容器
padding和gap混着调——比如容器已有padding: 16px，再把gap改成8px，会导致图片离边框只剩 8px，反而显得局促
真正容易被忽略的是：
gap控制的是轨道间隙，它不负责让第一行贴顶、最后一列靠右；那些位置的留白得靠容器自身的padding或margin来管，混用就乱套。 - 父容器必须是
