column-count需搭配break-inside、orphans/widows、column-gap等属性协同控制，2栏最稳妥，3栏需≥1200px宽屏并设gap≥2rem，4+栏必配column-width兜底，响应式须用媒体查询重置全部列属性。
直接用 column-count 就能分栏，但只设这个属性往往排得乱——文字断行不自然、图片被劈开、标题卡在栏尾，本质是没配齐配套控制项。
column-count 设多少才合适？
数值不是越大越好，要兼顾可读性与设备宽度：
-
column-count: 2最稳妥，移动端适配压力小，多数内容阅读节奏舒适 -
column-count: 3适合宽屏桌面端（≥1200px），但需配合column-gap至少2rem避免视觉拥挤 - 设
4+时必须加column-width作兜底，否则窄屏下会强制缩窄每栏导致字太挤 - 别用百分比或
auto，column-count只接受整数
为什么文字总在不该断的地方换栏？
浏览器默认按块级元素边界切栏，h1、p、img 都可能被硬生生劈成两半。解决靠三个关键声明：
- 给标题加
break-inside: avoid;，防止h2被截到上一栏末尾 - 给段落加
orphans: 3; widows: 3;，确保段首段尾至少留 3 行 - 图片必须设
break-inside: avoid;或包裹在figure里再加该样式，否则常出现“半张图在左栏、半张在右栏”
column-gap 和 column-rule 容易踩的坑
column-gap 不是边距，它只作用于栏与栏之间；column-rule 是装饰线，但会影响布局计算：
立即学习“前端免费学习笔记（深入）”；
-
column-gap: 1.5rem会从容器总宽里扣除，若容器宽刚好是600px，三栏+两处 gap 后每栏实际只剩约185px -
column-rule: 1px solid #ccc的 1px 也会计入 gap 宽度，等效于多加了 1px 间隔 - 想加竖线又不想影响排版？改用
column-rule: none，用伪元素::after在栏右边界画线更可控
真正难的是响应式断点处理——同一份 HTML，在手机上强制单栏、平板双栏、桌面三栏，不能只靠 column-count 切换，得结合 min-width 媒体查询重置所有 column 相关属性，漏掉 column-fill 或 column-span 都可能让某一段突然堆满一栏。
