columns- 失效主因是父容器 display 属性（如 flex/grid）静默覆盖多列上下文，或高度不足、缺少 break-inside-avoid；grid-cols- 更可控，需显式加 grid 类并用 gap-4 控制间距；v3.x 需手动补全工具类，响应式分栏须手写媒体查询，且 safari 旧版对 columns 兼容性差。
columns-* 为什么加了没反应
不是 Tailwind 没编译出类，而是浏览器压根没执行 column 布局——它被父容器的 display 属性静默覆盖了。常见失效组合有：flex + columns-3、grid + columns-2、inline-block + columns-4。这些 display 值会切断 CSS 多列流式上下文，导致 columns-* 完全无效。
另外，如果父容器设了 h-64 这类固定高度，而内容总高度不足，浏览器会自动退化为单列；子元素是 div 却没加 break-inside-avoid，整块内容会被“粘”在第一栏里，视觉上也像没分栏。
grid-cols-* 是更可控的等高方案
要让多列真正等高、内容不被截断、支持跨列或错位对齐，grid-cols-* 是更稳妥的选择。它通过 grid-template-columns: repeat(n, minmax(0, 1fr)) 实现弹性等分，每列高度由内容最长项撑开（即“等高”），且不依赖流式断行逻辑。
关键点：
- 必须显式加 grid 类（仅 grid-cols-3 不会自动启用 Grid 上下文）
- 列内子项用 flex-1 或 h-full 拉伸填满，避免高度塌缩
- 若列内容高度差异大，加 grid-auto-rows-min 或 grid-rows-[1fr] 强制统一行高
- gap-4 是唯一安全的列间距控制方式，mr-4 或 padding 会破坏网格轨道计算
Tailwind v3.x 中 columns-* 需手动补全工具类
Tailwind v3.x 默认不生成 columns-2、column-gap-4 等类，直接写会无效。必须在 tailwind.config.js 的 @layer utilities 中补全：
@layer utilities {
.columns-2 { columns: 2; }
.columns-3 { columns: 3; }
.column-gap-4 { column-gap: 1rem; }
.break-inside-avoid { break-inside: avoid; }
}
之后才能用：class="columns-3 column-gap-4 break-inside-avoid"。注意：column-gap 必须和 columns-* 写在同一元素上，单独给子元素加 column-gap-4 无效。
响应式列数不能靠 md:columns-3 实现
Tailwind 的断点前缀（如 md:）对 columns 属性完全无效——它不会生成媒体查询重置。真要做响应式分栏，必须手写媒体查询：
@layer utilities {
.columns-2 { columns: 2; }
@media (min-width: 768px) {
.md\:columns-3 { columns: 3; }
}
@media (min-width: 1024px) {
.lg\:columns-4 { columns: 4; }
}
}
而 grid-cols-* 天然支持断点，sm:grid-cols-2 md:grid-cols-3 可直接生效。这也是多数真实项目中倾向选 grid 的关键原因：可控、可预测、无需额外 hack。
真正容易被忽略的是 Safari 兼容性：iOS 14.5 及更早版本对 break-before-column 支持不全，标题可能被错误断在栏尾；所有现代浏览器对 grid 的支持都更一致。如果内容含图片，columns-* 下还必须显式设 display: block + break-inside-avoid，否则 img 默认内联行为会导致截断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
