columns是文字排版的唯一正解，因其支持自动断行、语义完整、跨列标题及列高平衡；grid将段落当独立项目处理，破坏文本流、无法自动分栏、丧失可访问性且不支持break-inside或column-span。
columns 是文字排版的唯一正解
Grid 不能替代 columns 做纯文本分栏——它根本不是为这个设计的。浏览器对 columns 的支持是基于排版引擎的原生断行逻辑，而 Grid 把每个 <p></p> 当作独立项目塞进格子，段落会被整块打断、换行点失控、语义丢失。你没法让一段连续文字“流”过三列，只能手动切开再塞，等于放弃可访问性和维护性。
为什么 columns 能自动平衡列高却不用写 JS
因为 column-fill: balance（默认值）是浏览器内置行为：它会动态调整断行位置，尽量让各列高度一致。Grid 没有对应机制——你得靠 grid-auto-rows 或固定高度硬控，稍一缩放或内容增减，列高就错位。另外，break-inside: avoid 能防止段落被劈开，column-span: all 可让标题横跨所有列，这些在 Grid 里要么不支持，要么得靠额外 DOM 结构和类名模拟。
columns 在 Tailwind 中“没反应”的常见原因
- 父容器没设
width或用了display: flex/display: grid—— columns 只作用于块级流式上下文 - 子元素用了
inline-block、float或position: absolute—— 它们脱离文档流，变成“一整块胶水”塞进第一列 - 内容太少或容器太窄，触发了浏览器最小列数保护（比如
columns: 3在小屏下可能只出 1 列） - Safari iOS 15.4 之前存在
column-rule渲染 bug，真机测试不可跳过
Grid 和 columns 混用会出什么问题
直接在同一个容器上同时写 columns-3 和 grid-cols-3，CSS 层叠会导致不可预测行为：可能列数失效、间距错乱、甚至文本消失。二者底层机制冲突——columns 修改的是内容流渲染路径，grid 重写了整个盒模型布局规则。真要混合，必须分层：外层用 Grid 做结构分区（如侧边栏+主内容区），主内容区内部再用 columns 排正文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
