应使用column-width替代column-count实现列数自动适配，设column-width: 280px让浏览器按最小宽度自动计算列数，小屏退化为单列，无需js或媒体查询。
用 column-width 替代 column-count 实现列数自动适配
硬写 column-count: 3 是最常见翻车点——它强制三列，小屏上图片被压扁、文字溢出、滚动条乱跳。真正“根据图片大小智能调整列数”，核心不是算列数，而是让浏览器按最小可用宽度自动决定列数。
关键就一句：column-width: 280px（或你图片的自然宽度下限）。浏览器会保证每列至少宽 280px，容器够宽就多列，窄了就自动退化为单列。不需要 JS 监听 resize，也不用写一堆媒体查询。
-
column-width和column-count别同时设——后者会被忽略 - 搭配
column-gap: 1rem控制列间距，别用margin，否则在 Firefox 下可能错位 - 每个
.item必须是块级元素，且不能有float、position: absolute或transform，否则脱离文档流，列切分失效 - Firefox 需额外加
page-break-inside: avoid配合break-inside: avoid防止卡片被截断
grid-template-columns: repeat(auto-fit, minmax(...)) 的实际表现
这个写法常被当成“响应式瀑布流”的银弹，但它不解决“列高不均”问题，只是让列数随容器变，每张图仍按网格轨道排布。所谓“瀑布感”，其实是靠 grid-auto-flow: dense 把后面矮图往前塞，填前面高图留下的空隙。
但注意：dense 模式不保证 DOM 顺序，视觉顺序可能和源码顺序不一致，对 SEO 和可访问性有隐性影响。如果内容有逻辑先后（比如时间线），慎用。
- 必须写
grid-auto-flow: dense，漏掉就变成明显断层，不是瀑布流 -
auto-fit和auto-fill行为不同：auto-fit会收缩未填充的列，auto-fill保留空列占位；响应式场景下只用auto-fit - 图片加载前高度为 0，会导致 grid 轨道塌陷、后续图错位——必须用
aspect-ratio或 padding-top 技巧预留空间 - 不要给
img设height属性，它会覆盖aspect-ratio，导致比例失控
图片高度差异大时，column-count 为什么看起来“卡顿”
因为 column-count 是纯流式切分：浏览器把所有子元素当连续文本流，从上到下、从左到右按列高平均分配。某张图特别高，就会拉长整列，而下一列从顶部开始填，结果就是“左边一列堆到屏幕底，右边两列只到一半”。这不是 bug，是设计如此。
如果你的图片高度差超过 2 倍（比如有的 200px，有的 600px），column-count 视觉上就会出现大片留白或错位感。这时候别调参数，该换方案。
- 检查是否误用了
display: inline-block或float在.item上——它们会让元素脱离流，column 失效 - 确保
.container有明确宽度（max-width或固定值），否则小屏下column-width可能撑破布局 - 图片未加载完成时，
height: auto会让.item高度为 0，引发重排；必须用aspect-ratio或容器 padding-top 预留空间 - 服务端若能传宽高，直接写
width和heightHTML 属性，CSS 里用width: 100%; height: auto保持等比缩放
什么时候必须上 JavaScript
当你需要“最短列优先插入”——也就是每张新图都精确落到当前最矮那列底部，形成真正 Masonry 效果时，CSS 没有办法。现代 grid-template-rows: masonry 只在 Chrome/Edge 116+ 支持，Safari 和 Firefox 仍无计划支持。
JS 方案的关键不在“怎么算列高”，而在“什么时候触发重排”。等所有图 load 完再布局，用户看到的是空白容器；正确做法是监听每个 img.onload，加载完一张就立即找最短列插入并更新高度数组。
- 列容器必须是真实 DOM 元素（如
<div class="col">），不能靠绝对定位模拟，否则语义和可访问性崩坏 <li>滚动加载新图时，别重置列高数组；继续在已有列中找最短列，否则会全部重排、页面跳动</li> <li>用 <code>new Image()预加载获取原始尺寸，再按目标列宽等比计算渲染高度，避免回流 - 若用 Masonry.js 库，注意
itemSelector必须精确匹配（比如".item"），不能写成".item *"这类错误选择器
真瀑布流的复杂点不在布局算法，而在图片加载时机与 DOM 渲染节奏的耦合。哪怕只差几十毫秒，用户看到的就是错位、跳变或大片留白。预设宽高、预留空间、分批加载、列高缓存——这些细节没对齐，再漂亮的 CSS 也会在真实网络环境下垮掉。
