现代报纸布局首选 column-count + column-gap 配合 break-inside: avoid；它原生支持、语义清晰、响应式友好、打印适配佳，直接对文本流分栏，避免 float 清浮动和 grid 手动切块问题。
HTML 做报纸布局，别用 float 或 table —— 现代方案就一条：用 column-count + column-gap，配合 break-inside: avoid 控制段落断行。
为什么 column-count 是报纸多栏的首选
浏览器原生支持分栏，语义清晰、响应式友好、打印适配天然好。它不像 float 需要清浮动，也不像 grid 多列需手动切内容块 —— 它直接对文本流做视觉分栏，行为接近 InDesign 的“文章串接”。
常见错误是把整页当 grid 布局来切，结果标题、图片、引用块全错位。报纸本质是「长文本流 + 局部装饰」，column-count 正好匹配这个结构。
-
column-count: 3表示视觉上分 3 栏，内容自动从左到右、从上到下流动 -
column-gap: 1.5rem控制栏间距，建议用rem或em，避免像素固定导致缩放失衡 - 必须加
column-fill: balance（默认值），否则最后一栏可能严重空缺
怎么防止标题/图片被硬生生劈成两半
默认情况下，浏览器可能在任意位置断栏，导致 <h2> 被切到下一栏开头，或 <img> 半张在左栏、半张在右栏 —— 这是报纸排版最刺眼的破绽。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
关键就是用 break-inside（注意不是 page-break-inside，后者已过时）：
h1, h2, h3, figure, blockquote { break-inside: avoid; }- 对需要整体保留的元素，统一加该声明；不要只写
h2忘了figure - 如果某张大图仍被切断，检查其父容器是否设置了
overflow: hidden或display: inline-block—— 这些会干扰断栏逻辑
响应式下怎么优雅地从 3 栏退到 1 栏
不能靠 JS 拆 DOM，也不能写一堆媒体查询改 column-count —— 那样内容顺序会乱。正确做法是用 min-width 触发断点，让分栏数自然降级：
article {
column-count: 1;
}
@media (min-width: 768px) {
article { column-count: 2; }
}
@media (min-width: 1024px) {
article { column-count: 3; }
}注意两点：
- 始终从
column-count: 1开始写，移动端优先，避免小屏强行分栏 - 别用
max-width媒体查询，否则在高 DPR 屏幕（如 MacBook Retina）上可能误判宽度 - 如果用了
column-rule（栏间竖线），记得在单栏时设为column-rule: none，否则会留一条孤零零的线
打印 PDF 时栏宽错乱、文字挤成一团？
这是最常被忽略的一环：浏览器打印预览不完全遵循屏幕 CSS，尤其对 column-count 的处理有差异。解决方法很具体：
- 在
@media print中显式重置：column-count: 1; column-gap: 0; - 给正文加
font-size: 12pt（注意单位是pt，不是px），PDF 打印引擎认这个 - 禁用所有
background-color和box-shadow，它们在多数 PDF 导出中不渲染，反而占位留白 - 如果用 Chrome 打印，勾选「背景图形」选项 —— 否则带背景色的
blockquote会变空白
真正的难点不在写法，而在于测试：不同浏览器（Chrome/Firefox/Safari）对 column-* 的打印支持程度不同，务必用实际打印机或「另存为 PDF」反复验证栏宽和断页位置。
