column-count不是响应式分栏的可靠选择，因其强制列数易致小屏文字切碎、图片劈裂、横向滚动；应改用column-width+媒体查询+break-inside: avoid组合，并显式重置移动端所有列属性。
column-count 不是响应式分栏的可靠选择，硬写列数会在小屏上把文字切成细条、引发横向滚动或段落劈裂；真要响应式，得用 column-width + 媒体查询 + break-inside: avoid 组合，否则就是裸奔。
为什么写了 column-count: 3 却只显示一栏
这不是 bug，是浏览器按容器宽度和内容流自动退化：当容器宽度撑不开 3 栏（含 column-gap）时，它就默默回退到 1 栏。更常见的是子元素是 <p> 或 <div> 这类块级元素，默认“独占一栏”，文本根本没机会流动分栏。
- 检查父容器是否设了
column-count和column-gap，且有明确宽度（如max-width: 900px），别让它撑满视口 - 确保内容是连续文本流；若必须用块级结构，给子元素加
break-inside: avoid - 别同时设
column-width和column-count——后者优先级更高，前者会被忽略 - 确认容器没被套在
display: flex或display: grid父元素里，那会直接禁用分栏
column-width 怎么设才真正自适应
column-width 是建议值，不是强制值；浏览器会根据容器宽度自动增减列数，但列宽可能略大于或小于你写的值。填个 200px 不等于响应式，关键在单位和兜底。
- 用
rem或em，比如column-width: 16rem，字体缩放时列宽同步变化 - 配合
column-gap: 1rem（大屏可放宽到1.5rem，小屏缩到0.5rem） - 中文内容务必加
overflow-wrap: break-word，否则长 URL 或英文串会撑破单栏 -
hyphens: auto对中文基本无效，别白费力气
移动端必须显式重置所有 column 属性
浏览器不会“自动降级”。只在桌面端写 column-count: 3，手机上它会硬塞，结果每栏只剩两三个字，还带横向滚动条。
立即学习“前端免费学习笔记（深入）”；
- 必须用
@media (max-width: 768px)显式重置整套属性：column-count: 1、column-gap: 0、orphans: 1、widows: 1 - 推荐用
@media (min-width: 769px)断点，避免小屏设备因缩放或 UA 欺骗误触发多列 - iOS Safari ≤14.0 有间隙错位问题，老项目仍需加
-webkit-column-width前缀 - 别对分栏容器设
transform或filter，这会让浏览器放弃硬件加速的列渲染路径
column-gap 加了 transition 为啥没动画
column-gap 不支持 CSS 过渡动画。写 transition: column-gap 0.3s 是无效的，只会触发强制重排（reflow），布局“啪”一下跳变，毫无平滑感。
- 真要过渡视觉密度，可把整个分栏容器包一层
overflow: hidden，再用transform: scale(0.98)微调 - 或改用子项的
margin-right控制间距（前提是子项是inline-level或flex item） - 想彻底规避，换
display: grid并用gap——Chrome/Firefox 新版本已支持其transition，但 Safari 仍不稳定 - DevTools 里打开 “Layout Shift Regions”，如果间隙变化时整块闪红，说明正在重排，
transition没起作用
真正决定响应效果的不是列数本身，而是列宽是否随视口和字体缩放自然变化；用死数字写 column-count，等于把排版权交给开发直觉，而不是用户设备。
