columns 才是报纸式排版的正解，因其支持自动断行、语义完整、跨列标题及响应式列数；grid 会破坏文本流、无法自动分栏、丧失可访问性且维护成本高。

直接说结论：columns 是报纸排版的正解，grid 不适合纯文字流分栏——它会强行切块、破坏阅读流，且不支持自动断行与跨列标题。

为什么 columns 才是报纸式排版的底层逻辑

columns 本质是 CSS 多列内容流（multi-column layout），浏览器把一段连续文本按列宽/列数自动拆分、换列、重排，就像排版软件处理报纸那样。它保留段落语义、支持 break-inside: avoid 防劈开、能用 column-span: all 让标题横跨所有列。

• 必须作用于块级容器（如 <p></p>、<div>），且子元素不能脱离文档流（禁用 <code>float、display: inline-block、flex）
• 列数不是硬编码的——columns: 150px 表示“每列尽量 150px 宽”，列数由容器宽度动态决定；columns: 3 表示“至少分 3 列”，但内容少时可能只出 1 列
• 老版本 Safari（iOS 15.4 之前）对 column-rule 和换行位置有渲染 bug，上线前务必真机测试

为什么别用 grid 去模拟报纸分栏

grid 是二维网格容器，它把子元素当作独立项目分配到格子中，完全不管文本是否连贯。你没法让一段 <p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 自动在多个 grid 单元格里“流动”，只能手动切文本、塞进不同 div ——这等于放弃语义、增加维护成本、破坏可访问性。

• 若强行用 grid-cols-3 包裹长段落，每个子 <p></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">，再给卡片加 <code>break-inside-avoid 防劈开

  真需要图文混排时，怎么安全组合 columns 和 grid

  纯文字用 columns，图文区块用 grid，二者分层使用，不嵌套在同一容器。

  • 外层用 columns-2 md:columns-3 控制正文分栏
  • 其中插入一个 <figure></figure>，设置 float: left + width: 200px + margin-right: 1rem 实现文字环绕
  • 若要大图横跨两列，改用 grid 单独做一个区块：外层 grid grid-cols-1 md:grid-cols-3 gap-6，把大图放在 md:col-span-2 的单元格里，文字放另一列
  • 绝对不要在同一个 <div> 上同时写 <code>columns-3 和 grid grid-cols-3——CSS 层叠会让渲染结果不可预测，DevTools 里看到的 computed style 可能和你写的完全对不上

    最易被忽略的一点：多列布局的可访问性依赖原生文本流。一旦你为了“视觉效果”把段落硬切成多个 <div> 再丢进 <code>grid，屏幕阅读器就会按 DOM 顺序读，而不是按视觉阅读顺序——报纸排版的优雅，本质是语义与呈现的统一，不是像素对齐。