column-count 在小屏幕下不生效，因浏览器优先按 column-width 计算列数，默认 auto 导致仅一列；须显式设置 column-width 才能使 column-count 生效。
column-count 在小屏幕下不生效？检查是否漏了 column-width
单纯设 column-count 在移动端常失效，因为浏览器会优先按 column-width 自动算列数，而后者默认是 auto，导致列宽撑满容器、实际只有一列。
- 必须显式设置
column-width（比如column-width: 150px），才能让column-count在媒体查询中真正起作用 -
column-count是“最多列数”，不是“固定列数”；实际列数由内容宽度 +column-width+column-gap共同决定 - 若内容太短，即使设了
column-count: 3，也可能只出一列——这不是 bug，是规范行为
Media Queries 中 column-count 切换卡顿或闪屏？加 will-change 提前提示
列数突变时，浏览器要重排内容流，尤其文本多时容易卡顿或出现短暂单列/错位。这不是 JS 控制问题，而是 CSS 渲染机制本身有延迟。
- 在触发列切换的容器上加
will-change: column-count，让浏览器提前分配渲染资源 - 避免在
@media (max-width: 768px)里直接改column-count，改用column-width驱动更平滑（例如从column-width: 280px→180px） - 慎用
column-fill: balance，它在动态切换时可能引发回流重绘，小屏下建议设为auto
Flex/Grid 布局里嵌套 columns 导致子项错位？别混用 display 类型
如果父容器是 display: flex 或 display: grid，再给子元素设 column-count，列布局大概率失效——CSS 多列是块级格式化上下文（BFC）特性，与 Flex/Grid 的主轴对齐逻辑冲突。
- 多列必须作用于
display: block或display: inline-block元素，且不能是 Flex/Grid 容器的直接子项 - 正确做法：外层用 Flex/Grid 控制整体结构，内部用一个
<div class="columns">包住文本内容，再对这个 div 设列属性 - 注意
break-inside: avoid对 flex item 无效，想防止段落被断开，得加在段落自身上，而不是父 flex 容器
IE11 和 Safari 旧版 column-count 行为不一致？用 -webkit-column-count 兜底但别依赖
IE11 支持 column-count 但不支持 column-span: all；Safari 12 之前对 column-rule 渲染有偏移；iOS Safari 在 zoom 缩放时列高计算异常。
立即学习“前端免费学习笔记（深入）”；
- 必须写双前缀：
-webkit-column-count和column-count，顺序不能反（否则 WebKit 内核可能忽略标准属性） - 不要指望
column-fill: balance在 Safari ≤13.1 下准确工作，它常把最后一列拉得特别长 - 测试时务必真机打开 iOS Safari，模拟器无法复现列断裂或文字截断问题
多列响应式最麻烦的不是写法，而是内容语义和视觉节奏的断裂感——同一段文字在 3 列和 1 列下阅读路径完全不同，而 CSS 不管这个。你得手动控制 break-before、break-after，甚至用 JS 监听 resize 来微调分隔点，否则用户滚动时会明显感到“卡一下”。
