最可行、最轻量的方案是column-count，但必须弃用.row和.col-*类，改用干净容器（如.masonry-container），子项设break-inside: avoid、img加宽高属性或aspect-ratio，配合@supports检测和响应式媒体查询。
纯 CSS 实现瀑布流图片画廊，在 Bootstrap 项目里最可行、最轻量的方案是 column-count，但它不是“套上就用”，而是必须绕开 Bootstrap 的 .row 和 .col-* 类，否则必然错位或静默失效。
为什么直接给 .row 加 column-count 没反应
因为 Bootstrap 5+ 的 .row 默认是 display: flex，而 column-count 只对块级流（display: block）容器生效。浏览器遇到冲突声明时，会直接忽略 column-count —— 不报错，也不渲染，结果就是图片全堆成一列。
- 现象：
.row上写了column-count: 3，但子项仍按.col-md-4宽度挤在一列里 - 根本原因：
.col-md-4带flex: 0 0 auto和width: 33.333%，强行覆盖了多列布局所需的自然流式排列 - 解法：完全弃用
.row和所有.col-*类，改用干净的语义容器，比如<div class="masonry-container">
column-count 必须配 break-inside: avoid
不加这个声明，图片卡片大概率被劈成两半——标题在第一列，图片在第二列，或者文字断在中间。这不是渲染 bug，而是多列布局的默认行为。
-
break-inside: avoid必须作用于每个子项的最外层元素，例如.masonry-container > div或.item - 别写成
break-inside: avoid-column：它在 Safari 和旧版 Chrome 兼容性差，且部分场景下反而失效 - 如果子项含
<img>，同步加img { max-width: 100%; height: auto; }，否则图片撑破列宽会导致break-inside失效
图片加载导致“跳闪”和错列怎么防
浏览器初始渲染时，<img> 高度为 0，column-count 按这个高度分列；等图片加载完成，高度突增，触发重排——视觉上就是“抖一下”或“突然跨列”。这不是 CSS 能解决的，得靠 HTML 层预留空间。
立即学习“前端免费学习笔记（深入）”；
- 给
<img>写 HTMLwidth和height属性（不是 CSS），例如<img src="a.jpg" width="300" height="400">，让浏览器提前算出 aspect ratio - 或统一用 CSS
aspect-ratio: 4/3+object-fit: cover，兼容性更好（Chrome 88+/Firefox 89+/Safari 15.4+） - 绝对不要用
background-image：它不参与文档流，break-inside: avoid对它无效
@supports 和响应式列数切换要一起做
只写 @media (min-width: 768px) { column-count: 2; } 是不够的。窗口缩放过程中，列数可能卡在中间状态，出现短暂单列或间隙错乱。
- 必须用
@supports (column-count: 3)包裹整套规则，否则 Safari 15 及更早版本直接白屏 - 响应式列数切换要显式匹配 Bootstrap 断点，并同步控制
column-gap和子项margin-bottom，例如：@media (min-width: 992px) { .masonry-container { column-count: 3; column-gap: 1.5rem; } } - iOS Safari 对
column-count支持不稳定，若目标用户含大量 iPhone 用户，建议 fallback 到 Masonry +imagesLoaded，而非硬扛 CSS 方案
真正难的不是写那几行 CSS，而是意识到：只要还留着 .col-* 类，或者没处理图片加载时机，column-count 就永远只是个“看起来像”的幻觉。
