用 css grid 实现报纸式布局需设 grid-template-columns 定义栏数，用 grid-column 控制标题跨栏与图文分区，禁用 column-span；正文用衬线字体栈和 1.55 行高，响应式通过 @container 重构内容顺序而非简单删栏。
用 CSS Grid 实现多栏报纸式布局
纯靠 float 或 inline-block 拼报纸栏是自找麻烦，现代方案直接上 grid-template-columns。关键不是“看起来像报纸”，而是让文字流自然跨栏、标题能横跨多列、图片能灵活嵌入——这些都得靠 Grid 的显式轨道控制。
实操建议：
- 用
column-count虽然简单，但无法控制每栏宽度、无法让标题横跨全宽，且内容断行不可预测，仅适合纯文本简报 - 真正可控的做法：设容器为
display: grid，用grid-template-columns: repeat(3, 1fr)定义三栏，再用grid-column: 1 / -1让<h1></h1>横跨全部列 - 正文段落放进单独的
<article></article>，设grid-column: 2或按需指定列范围，避免和侧边栏（如引用块、图片）冲突 - 注意
gap值别设太大——报纸讲究紧凑感，gap: 1.2rem比2rem更接近《纽约时报》印刷版的呼吸感
处理跨栏文本流：别碰 column-span
column-span: all 看起来是为报纸量身定做的，但它只在多列容器（columns）中生效，而这种容器对图文混排几乎无解：图片无法精准定位，标题无法独立样式，更别说响应式回退了。实际项目里它基本等于“禁用”。
替代路径更可靠：
- 放弃
columns属性，改用 Grid +span控制区块级跨越，比如<aside class="pullquote"></aside>加grid-column: 1 / 3占两栏 - 需要真正“文字绕图”？用
shape-outside配合float: left，但只对单张图+短段落有效；长文仍推荐 Grid 分区后手动分配段落容器 - 警惕
break-inside: avoid——它在 Grid 里无效，在多列里又容易导致空白断层，不如用min-height+overflow: hidden预留视觉缓冲
字体与行高：衬线体不是装饰，是可读性刚需
报纸不用无衬线体不是怀旧，是物理限制下的选择：油墨扩散、纸张吸水、小字号下 Georgia 或 Charter 的衬线能引导视线沿基线滑动，降低跳行错误率。Web 上不换字体，排版就白搭。
落地要点：
- 正文必须用明确指定的衬线栈：
font-family: "Charter", "Bitstream Charter", "Noto Serif SC", serif，避免浏览器 fallback 到默认Times New Roman导致字重突变 -
line-height设为1.55而非1.6或1.5——这是《卫报》网页版实测最平衡的值：太大会割裂段落，太小会让多栏间行距趋同，失去“栏”的识别感 - 标题字号别盲目放大，
h1用clamp(1.8rem, 4.2vw, 2.8rem)即可，重点在字重（font-weight: 700）和字间距（letter-spacing: -0.02em）压住视觉重心
响应式降级：三栏不是终点，是起点
手机屏强行撑三栏只会让字小到看不清，但直接切单栏又丢掉报纸的节奏感。真正的降级不是删栏，是重构信息权重：把“主栏→次栏→侧栏”的空间逻辑，转成“主内容→折叠引用→底部注释”的时序逻辑。
具体操作：
- 用
@container查询替代媒体查询（如果支持），当容器宽度时，把侧栏 <code>grid-column改为1 / -1并设order: 3，让它沉到底部 - 保留
gap但减半，同时把padding-inline从4rem收到1.5rem，维持左右留白比例而非绝对值 - 最关键的细节：手机端禁用
hyphens: auto，它在小屏上常把单词断在错误位置，反而增加阅读负担；桌面端则必须开，尤其英文长词
报纸排版最难的从来不是分几栏，而是让每一块内容在不同尺寸下，依然保持它该有的轻重、缓急和停顿。那些藏在 grid-row 和 line-height 里的微调，才是读者没意识到却真实影响阅读耐力的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
