如何运用CSS Grid与Columns属性实现报纸排版风格的复杂文字布局？

本文共计1143个文字，预计阅读时间需要5分钟。

直接说结论：

为什么 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 ——这等于放弃语义、增加维护成本、破坏可访问性。