column-count是唯一能自动断行的文本分栏方案，它让同一段<p>文字原生跨栏显示，不改DOM、兼容IE10+；但仅对block/inline-block生效，套在Flex/Grid容器中会失效。
column-count 是唯一能自动断行的文本分栏方案
想让一段 <p> 里的文字自动跨栏显示，而不是手动切分成多个 <div>，就只能用 column-count。它不是“排版技巧”，而是浏览器原生支持的文本流分栏机制——同一段 DOM 不拆、不改顺序、不影响屏幕阅读器，IE10+ 全兼容。
常见错误是把 column-count 套在 display: flex 或 display: grid 容器里，结果完全没反应。因为 column-count 只对 display: block 或 display: inline-block 生效，Flex/Grid 会直接忽略它。
-
column-count: 2是“期望值”，不是强制值；实际栏数由容器宽度和column-width共同决定 - 要响应式，优先设
column-width: 300px，小屏自动退化为单栏，大屏可能三栏 -
column-gap控制栏间距，别用margin替代——缩放时容易错位 -
column-rule是可选分隔线，加不加都不影响分栏逻辑
怎么防段落被硬生生劈成两半？
默认情况下，浏览器可能把一个 <p> 拆开塞进不同栏，阅读体验断裂。用 break-inside: avoid 可阻止这种行为：
.article-text p {
break-inside: avoid;
}
但要注意：break-inside: avoid 对 <img> 和 <iframe> 无效，它们仍可能跨栏显示。如果必须保图完整，得单独包裹一层 <div> 并设 break-inside: avoid。
立即学习“前端免费学习笔记（深入）”；
- 标题跨栏要用
column-span: all，但该元素不能有float或position: absolute -
column-span: all的元素需显式声明display: block，否则不生效 - 避免给整个容器设
overflow: hidden，可能截断最后一栏的底部内容
别混用 Flex/Grid 和 column-count
一旦父容器用了 display: flex 或 display: grid，column-count 就彻底失效——这不是 bug，是规范定义的行为。Flex/Grid 是布局容器，负责排列子元素；column-count 是文本流渲染指令，只作用于块级文本内容。
真实场景中容易踩坑的是：用 Grid 做整体页面结构（比如 header/main/footer），又在 <main> 里塞一段长文并指望 column-count 工作。解决方法很简单：确保长文容器的**直接父级**是 block，中间不要穿插 Flex/Grid。
- 如果
<main>本身是 Grid/Flex 子项，让它保持display: block即可，不用改它的 display 值 - 不要为了“统一风格”强行给文本容器套 class="grid-col" 或 class="flex-item"
- 旧项目残留
float时，父容器加display: flow-root比overflow: hidden更安全
什么时候不该用 column-count？
如果你要排的是几个独立模块（比如三张卡片、左右导航+正文），column-count 不是解法——它不分块，只断行。这时候该用 Flex 或 Grid。
例如：<article> 里混着 <h2>、<p>、<figure>、<ul>，且希望每个区块完整留在一栏内，column-count 无法保证语义完整性，反而让列表或图片被撕开。
- 结构化内容（卡片、侧边栏、工具区）→ 用
display: grid或display: flex - 纯文本流（新闻正文、小说章节、法律条文）→ 用
column-count - 混合内容（带图/表的长文）→ 优先保障图文完整性，必要时放弃自动分栏，改用固定宽度 + 滚动
真正难处理的不是“怎么写”，而是判断“该不该用”。很多翻车案例，根源都在没分清「文本流分栏」和「结构化分栏」的本质区别。
