Bootstrap 5 瀑布流中 gap 不生效，因其 card-columns 已废弃且原生 CSS columns 不支持 gap；需用 column-gap 控制列间距、margin-bottom 控制卡片垂直间隙，并配合 break-inside 防断图。
为什么 gap 在 Bootstrap 5 瀑布流里不生效
因为 bootstrap 5 的 card-columns（已废弃）和原生 css column-count 瀑布流都不支持 gap；它们靠 column-gap 控制列间距，但对每张图片之间的垂直间隙完全没控制力——你调了 gap: 1rem 没反应，不是写错了，是压根不走这个逻辑。
真正起作用的是：column-gap 控制列与列之间水平距离，margin-bottom 控制单张卡片（或图片容器）的底部留白。两者必须配合用。
-
column-gap只影响列边界，不影响同一列内卡片堆叠的间距 - 如果用
card包裹img，得给.card设margin-bottom，不能只设img - Bootstrap 5.3+ 推荐弃用
card-columns，改用 CSScolumns+ 自定义类
用纯 CSS columns 实现可控间距的瀑布流
Bootstrap 不提供“带间距的瀑布流组件”，得自己补一层样式。核心是用原生 columns 属性，再通过 margin 和 break-inside 防断图。
示例结构：
<div class="masonry"> <div class="masonry-item">@@##@@</div> <div class="masonry-item">@@##@@</div> </div>
对应 CSS：
.masonry {
columns: 3;
column-gap: 1.5rem;
}
.masonry-item {
break-inside: avoid;
margin-bottom: 1.5rem;
}
.masonry-item img {
width: 100%;
display: block;
}
-
columns: 3比column-count: 3更简洁，效果一致 -
break-inside: avoid防止图片被截断到两列中（尤其高图） -
margin-bottom必须设在.masonry-item上，设在img上会被列布局忽略
用 Masonry JS 库时怎么调间距
如果你用了官方推荐的 Masonry（v4+），它默认用 gutter 参数控制间距，但注意：这个值是列/行之间的空隙，不是 margin，且不接受百分比或 em，只认像素或 rem。
初始化示例：
const elem = document.querySelector('.grid');
const msnry = new Masonry(elem, {
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
gutter: '1.5rem'
});
-
gutter值必须是字符串（如'1.5rem'），写成1.5会当成 px 处理 - 如果同时用了
columnWidth，gutter是额外加在列宽之外的，不是包含关系 - 别在 CSS 里再给
.grid-item设margin，否则会和gutter叠加，间距翻倍
移动端适配时常见的错位和重叠
瀑布流在小屏上列数变少（比如从 3 列 → 1 列），如果只靠媒体查询改 columns 数，容易出现最后一张图被挤到顶部、或两张图重叠——本质是浏览器列平衡算法在单列下失效。
- 用
column-fill: auto替代默认的balance，避免等高拉伸导致空白错位 - 小屏下建议直接切回
flex或grid布局，而不是硬撑columns - JS 方案（如 Masonry）需监听
resize并调用layout()，否则窗口缩放后位置不更新
最麻烦的其实是图片加载时机：异步加载的图片高度为 0 时触发布局，等图一进来就塌陷。必须确保 img 有固定宽高比（用 aspect-ratio 或 padding-top hack），或者等所有图 load 后再初始化瀑布流。
