columns 才是报纸式排版的正解，因其支持自动断行、语义完整、跨列标题及响应式列数；grid 会破坏文本流、无法自动分栏、丧失可访问性且维护成本高。
直接说结论：columns 是报纸排版的正解，grid 不适合纯文字流分栏——它会强行切块、破坏阅读流，且不支持自动断行与跨列标题。
为什么 columns 才是报纸式排版的底层逻辑
columns 本质是 CSS 多列内容流（multi-column layout），浏览器把一段连续文本按列宽/列数自动拆分、换列、重排，就像排版软件处理报纸那样。它保留段落语义、支持 break-inside: avoid 防劈开、能用 column-span: all 让标题横跨所有列。
- 必须作用于块级容器（如
<p>、<div>），且子元素不能脱离文档流（禁用float、display: inline-block、flex） - 列数不是硬编码的——
columns: 150px表示“每列尽量 150px 宽”，列数由容器宽度动态决定；columns: 3表示“至少分 3 列”，但内容少时可能只出 1 列 - 老版本 Safari（iOS 15.4 之前）对
column-rule和换行位置有渲染 bug，上线前务必真机测试
为什么别用 grid 去模拟报纸分栏
grid 是二维网格容器，它把子元素当作独立项目分配到格子中，完全不管文本是否连贯。你没法让一段 <p> 自动在多个 grid 单元格里“流动”，只能手动切文本、塞进不同 div ——这等于放弃语义、增加维护成本、破坏可访问性。
- 若强行用
grid-cols-3包裹长段落，每个子<p>会整块塞进一列，不会折行分列 -
grid不识别break-inside或column-span，标题跨列只能靠col-span-3，但前提是你已把标题单独抽成一个 grid item - 响应式列数变化需写多个断点类（如
grid-cols-1 sm:grid-cols-2 lg:grid-cols-3），而columns: 150px一行就搞定自适应
columns 常见失效原因和修复方式
你写好了 columns-3 却没反应？八成是布局上下文被破坏了。
立即学习“前端免费学习笔记（深入）”；
- 父容器没设明确宽度（比如缺
w-full或max-w-4xl），导致计算列宽时取到auto，实际变成单列满屏 - 子元素用了
float或display: flex，它们脱离多列流，整块“糊”进第一列（典型表现：图片卡在左上角，后面文字全挤在右侧） - 容器设了
height或max-height，内容被截断，根本没触发分栏条件（多列只在内容高度 > 容器高度时才启用） - 想让卡片列表用
columns分栏？不行——得把卡片包进一个<div class="columns-3">，再给卡片加break-inside-avoid防劈开
真需要图文混排时，怎么安全组合 columns 和 grid
纯文字用 columns，图文区块用 grid，二者分层使用，不嵌套在同一容器。
- 外层用
columns-2 md:columns-3控制正文分栏 - 其中插入一个
<figure>，设置float: left+width: 200px+margin-right: 1rem实现文字环绕 - 若要大图横跨两列，改用
grid单独做一个区块：外层grid grid-cols-1 md:grid-cols-3 gap-6，把大图放在md:col-span-2的单元格里，文字放另一列 - 绝对不要在同一个
<div>上同时写columns-3和grid grid-cols-3——CSS 层叠会让渲染结果不可预测，DevTools 里看到的 computed style 可能和你写的完全对不上
最易被忽略的一点：多列布局的可访问性依赖原生文本流。一旦你为了“视觉效果”把段落硬切成多个 <div> 再丢进 grid，屏幕阅读器就会按 DOM 顺序读，而不是按视觉阅读顺序——报纸排版的优雅，本质是语义与呈现的统一，不是像素对齐。
