直接用 column-count 实现分栏，无需 javascript 或 flex/grid；因后者适用于独立块而非连续文本，且易破坏语义与可访问性；需确保容器为 block、避免干扰样式，并配合 column-width 和媒体查询实现响应式。

直接用 column-count 就行，不用写 JavaScript、不用套 Flex 或 Grid，一行 CSS 就能实现新闻/博客类长文本的自动分栏。

为什么不用 Flex/Grid 做段落分栏

很多人一看到“分栏”就本能写 display: flex 或 display: grid，结果发现文字全挤在第一栏里——因为 Flex/Grid 是给「多个独立块」排位置的，不是给「一段连续文字」断行的。

• column-count: 3 的作用对象是文本流，浏览器会自动把同一段 <p></p> 里的文字切开、分到三栏里
• Flex/Grid 的子元素必须是独立的 <div>、<code><section></section>，你得手动拆段落，语义和可访问性都受损
• 老项目混用 display: flex 和 column-count 时，column-count 直接失效（只对 block 或 inline-block 生效）

怎么写才真正生效

核心就三件事：容器设成块级、加 column-count、避开干扰样式。


html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
下载
• 父容器必须是 display: block（默认就是，别手动改成 flex 或 grid）
• 基础写法：

  .article {
    column-count: 2;
    column-gap: 1.5rem;
    column-rule: 1px solid #eee;
  }

• 想响应式？优先用 column-width 而非 column-count：column-width: 200px 表示“每栏至少 200px”，浏览器自己算该分几栏
• 防段落跨栏断裂：给 <p></p> 加 break-inside: avoid，但注意对 <img> 和 <iframe></iframe> 无效

移动端和小屏必须处理的坑

三栏在手机上字太小、行宽太窄，根本没法读——这不是 bug，是设计常识。

• 必须加媒体查询：

  @media (max-width: 768px) {
    .article {
      column-count: 1;
      column-gap: 0;
    }
  }

• 别用固定 width 控制栏宽，改用 column-width + 媒体查询组合，比如 column-width: 180px 在小屏下自然退化为单栏
• 如果内容特别短（比如只有两段话），column-count: 3 可能只出一栏——这是正常行为，浏览器不会强行拉伸空白

真正容易被忽略的是：分栏效果只对纯文本内容可靠；一旦里面夹了 <img>、<blockquote></blockquote> 这类块级元素，它们会占据整栏宽度，导致栏高不均。这时候得靠 break-inside: avoid 或手动调整结构，而不是硬调 CSS。