column-count + column-gap 做响应式分栏必须配合媒体查询，否则小屏下文字切碎、图片劈裂、标题卡栏尾；浏览器会自动退化为1栏但需确保容器宽度足够且内容为连续文本流，块级元素需加break-inside: avoid；column-width与column-count互斥，移动端须显式重置所有列属性，column-gap不可动画，中文需用overflow-wrap: break-word，flex/grid容器中column属性失效。
直接用 column-count + column-gap 做响应式分栏，不加媒体查询就是裸奔——小屏下文字被切成细条、图片劈成两半、标题卡在栏尾，根本没法读。
为什么写了 column-count: 3 却只显示一栏
这不是 bug，是浏览器按内容流自动判断的结果：当容器宽度不够撑开 3 栏（含 column-gap 所占空间）时，它会默默退化为 1 栏。更常见的是子元素本身是 display: block，比如 <p> 或 <div>，它们默认“独占一栏”，导致文字没机会流动分栏。
- 检查父容器是否设置了
column-count和column-gap，且容器有足够宽度（比如桌面端 ≥1200px） - 确保内容是连续文本流，而非一堆独立块级元素；若必须用块级结构，给子元素加
break-inside: avoid或改用display: inline-block - 别依赖
column-width和column-count同时设——二者互斥，后者优先级更高，前者会被忽略
移动端必须用 @media 重置所有 column 属性
只在桌面端写 column-count: 3，手机上不会自动变回 1 栏。浏览器不会“降级”，它只会硬着头皮分，结果每栏窄得只剩 2–3 个字，还带横向滚动条。
- 必须显式声明断点：
@media (max-width: 768px) { .text { column-count: 1; column-gap: 0; } } - 不能只改
column-count，column-gap、orphans、widows都要同步重置，否则小屏下间隙错位或段落孤行 - 推荐用
min-width断点（如@media (min-width: 769px)），避免小屏设备因缩放或 UA 欺骗误触发多列
column-gap 的值不能靠 transition 动画
给 column-gap 加 transition: column-gap 0.3s 是无效的。它不触发 CSS 动画，只会强制重排（reflow），布局“啪”一下跳变，毫无平滑感。
立即学习“前端免费学习笔记（深入）”；
- 真要过渡效果，改用
margin-right控制子项间距，或把整个容器包一层overflow: hidden后用transform: scale()微调视觉密度 - 想彻底规避这个问题，直接换
display: grid，用grid-column-gap——Chrome/Firefox 新版本已支持其transition，但 Safari 仍不稳定 - DevTools 里打开 “Layout Shift Regions”，如果间隙变化时整块闪红，说明正在重排，
transition没起作用
中文排版下 hyphens: auto 基本没用
这个属性对英文、德文等能自动加连字符的语言有效，但中文没有连字符概念，lang="zh" 下 hyphens: auto 不会生效。长 URL 或英文术语卡在栏末撑破布局，得另想办法。
- 对纯中文内容，用
word-break: break-word或更稳妥的overflow-wrap: break-word（注意 Firefox 中需配合max-width才对 inline 元素生效） -
column-rule画的竖线会穿过未断开的长单词，但它不影响word-break行为，两者可共存 - 真正难控的是图片——必须给
<img>或其父<figure>加break-inside: avoid，否则常出现“半张图在左栏、半张在右栏”
最易被忽略的点：一旦父容器用了 display: flex 或 grid，column-count 就完全失效——多列只作用于 block 流式上下文，和 Flex/Grid 不兼容。不是属性没写对，是布局层直接冲突了。
