columns-3 失效是因为浏览器未执行 column 布局，主因是父容器为 flex/grid、设了固定高度、子元素未加 break-inside-avoid、Tailwind v3.x 未手动补全工具类，且 column-gap 必须与 columns-* 同级使用。
直接用 columns-* 类就行，但必须满足四个前提：父容器是块级流式上下文、不设固定高度、子元素支持断行、浏览器支持 column 属性。否则它会静默失效。
为什么 columns-3 加了没反应？
不是 Tailwind 没编译出来，而是浏览器压根没执行 column 布局——常见原因有：
- 父容器用了
flex或grid，覆盖了 column 流式行为 - 容器设了
h-64这类固定高度，内容撑不满，列数自动退化为 1 - 子元素是
div且没加break-inside-avoid，整块被塞进第一栏，不拆分 - Tailwind v3.x 默认不启用
columns-*工具类，需手动在@layer utilities中补全
如何让 columns-* 真正生效？
按顺序检查并修正以下五点：
- 父容器必须是纯块级流（比如
div），去掉flex、grid、inline-block等破坏流式布局的类 - 确保父容器有明确宽度（如
w-full或max-w-4xl），但不要设height - 子元素如果是卡片或段落块，统一加
break-inside-avoid防止被跨栏截断 - 列间距必须和
columns-*写在同一元素上，单独写column-gap-4无效 - 在
tailwind.config.js的@layer utilities中补全工具类（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 层叠冲突，行为不可预测 - 响应式列数不能靠
md:columns-3实现——Tailwind 断点类对columns属性无效，必须手写媒体查询重置
真正容易被忽略的是兼容性：Safari ≤ iOS 14.5 对 break-before-column 支持不全，标题可能被错误断开；而所有现代浏览器对 grid 的支持都更稳定。如果内容里有图片，columns-* 下必须显式设 display: block + break-inside-avoid，否则默认内联的 img 会被截断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
