不能只靠媒体查询单设column-count，必须配合break-inside: avoid、column-gap及阶梯断点；否则小屏会硬切文字、劈开图片、产生空白列，且列高严重不齐。
column-count 本身不响应视口变化，直接靠 JS 动态改值容易卡顿、错位、闪屏；真正稳定的做法是用媒体查询阶梯式控制列数，再配合几条关键样式兜底。
为什么不能只写 @media (max-width: 768px) { column-count: 1; }
这种写法看似合理，但会出三种典型问题：文字在行中被硬切（比如“响应式”变成“响/应式”跨列）、图片被从中间劈开、小屏下出现空白列。根本原因是 column-count 只管“分几列”，不管“怎么断”——它默认允许任意位置断行，且不感知内容高度。
- 必须搭配
break-inside: avoid（写在卡片级容器上），阻止卡片被跨列切割 - 必须显式设
column-gap，否则 Safari 旧版可能回退到不可控的默认间隙 - 移动端要从
column-count: 1起步向上加，而不是从 3 往下减，避免 iPad 等设备卡在“2.5 列”的尴尬状态
@media 断点怎么设才不翻车
别按常见设备宽度机械套用。真实渲染受设备像素比、字体缩放、最小可读列宽影响，纯靠 min-width 容易在某些 iPad 尺寸下触发列高严重不齐。
- 推荐三档断点：
@media (min-width: 480px)→column-count: 1，@media (min-width: 768px)→column-count: 2，@media (min-width: 1024px)→column-count: 3 - 每档只改
column-count和column-gap，别碰width或max-width，否则干扰浏览器列宽计算逻辑 - Safari 15.4 之前不支持独立
column-gap，必须写双前缀：-webkit-column-gap: 1rem和column-gap: 1rem
图片加载导致的布局闪动怎么压
图片没加载完时高度为 0，column-count 按 0 高度分列；等图片一进来就整块重排，用户看到的是“先塌成一条线，再炸开成多列”。这不是 bug，是渲染机制决定的。
立即学习“前端免费学习笔记（深入）”；
- 给图片容器加
break-inside: avoid，图片本身设display: block，消除基线对齐空白 - 用
aspect-ratio或min-height占位，让容器有初始高度（例如min-height: 150px） - 如果必须 JS 控制（如根据图片总数动态调列数），resize 事件一定要节流，且优先读取
getComputedStyle(el).columnCount而非硬编码值
column-fill: balance 是不是万能解
不是。column-fill: balance 在内容量少时确实能让列高更均匀，但 Firefox 默认是 auto，旧版（v100 以下）甚至不支持该值；而 Safari 对 column-fill 的实现始终偏保守，常忽略该声明。
- 显式声明
column-fill: balance是好习惯，但别依赖它解决所有高度不齐问题 - 真正影响列高一致性的，是卡片是否被
break-inside: avoid保护、图片是否有占位、以及各列内容块的高度方差 - 如果业务要求严格底部对齐，
column-count就不是合适方案——该换display: grid或 JS 计算高度的瀑布流库
最常被忽略的一点：语义和可访问性。DOM 是单列流，视觉是多列瀑布，屏幕阅读器仍按 HTML 顺序读取，会导致逻辑断裂。若内容有明确阅读路径，column-count 只能作视觉增强，不能替代结构设计。
