columns-类失效主因是浏览器未执行column布局，具体包括父容器为flex/grid、设固定高度、子元素缺break-inside-avoid、v3.x未手动补全工具类，且column-gap须与columns-同级使用。

直接用 columns-* 类就能实现文字分栏，但 90% 的“没反应”问题都出在容器上下文或 Tailwind 版本配置上，不是类名写错了。

为什么 columns-3 加了却像没加一样？

浏览器根本没触发 column 布局，常见原因有四个：

• 父容器用了 flex 或 grid —— 它们覆盖了流式上下文，column 失效
• 容器设了 h-64 这类固定高度，内容撑不满，列数自动退化为 1
• 子元素是 div 却没加 break-inside-avoid，整块被塞进第一栏，不拆分
• Tailwind v3.x 默认不启用 columns-* 工具类，需手动在 tailwind.config.js 的 @layer utilities 中补全

如何让 columns-* 真正生效？

按顺序检查并修正这五点：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 父容器必须是纯块级流（比如裸 div），去掉所有 flex、grid、inline-block
• 确保父容器有明确宽度（如 w-full 或 max-w-4xl），但不要设 height
• 子元素统一加 block 显示 + break-inside-avoid（卡片/段落都适用）
• column-gap-4 必须和 columns-3 写在同一元素上，单独加无效
• 在 tailwind.config.js 中补全工具类（v3.x 必做）：

  @layer utilities {
    .columns-2 { columns: 2; }
    .columns-3 { columns: 3; }
    .column-gap-4 { column-gap: 1rem; }
  }

columns-* 和 grid-cols-* 到底该选哪个？

看内容类型和控制粒度需求：

• 长文本流（新闻摘要、博客正文、词典条目）→ 用 columns-3：轻量、自动分栏、DOM 顺序线性，无障碍友好
• 卡片列表、表单字段组、需要跨列或对齐控制 → 用 grid-cols-3：自由度高，但需显式定义轨道，且不支持响应式列数自动增减
• 别混用：同一容器上同时写 columns-3 和 grid-cols-3 会导致 CSS 层叠冲突，行为不可预测

真正容易被忽略的兼容性细节

Safari ≤ iOS 14.5 对 break-before-column 支持不全，标题可能被错误断开；所有现代浏览器对 grid 的支持都更稳定。如果内容里有图片，columns-* 下必须显式设 display: block + break-inside-avoid，否则默认内联的 img 会被截断。还有——md:columns-3 这类写法完全无效，Tailwind 断点类对 columns 属性不生效，必须手写媒体查询重置。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！