column-count 是实现报纸效果最轻量且语义正确的方案，它让连续文本自动分栏，避免 float 和 flex 破坏文档流、错位、维护困难等问题；需配合 column-gap、break-inside: avoid、column-fill: balance 使用，并用 min-width 媒体查询响应式降级，打印时注意 @page、单位和 overflow 设置。
直接用 column-count 就能做出接近印刷级的报纸效果，不需要 float、不用 JS 拆内容、也不必手动画三栏容器——这是目前最轻量且语义正确的方案。
为什么别从 float 或 flex 开始写报纸布局
新手常照着老教程用 float: left + width: 33% 硬切三栏，结果一加图片就错位，一调字体就换行异常，一改屏幕宽度就全乱。根本原因是：报纸不是“三个并排盒子”，而是“一段连续文本自动流动分栏”。float 破坏文档流，flex 把每段当独立项处理，都不匹配这个逻辑。
- 浏览器对
float的清除行为在不同字号/缩放下不一致，移动端极易塌陷 -
flex-wrap: wrap无法控制段落内部断行位置，标题可能被劈成两半 - 所有手动切块方式都会让后续增删段落时，必须同步调整 HTML 结构，维护成本陡增
column-count 必须配的三项 CSS
只写 column-count: 3 是不够的，缺了下面这三条，打印、缩放、响应式都会出问题：
-
column-gap: 1.5rem：用rem或em，别用px，否则缩放时栏距僵硬 -
break-inside: avoid加在h2、figure、blockquote上——防止标题或图片被截断到下一栏开头 -
column-fill: balance：虽然默认值就是它，但显式声明可避免某些旧版 Safari 忽略平衡算法，导致最后一栏大片留白
响应式降级要从 column-count: 1 起手
很多教程写 @media (max-width: 768px) { column-count: 1; }，这在高 DPR 屏幕（比如 MacBook Retina）上会误判，因为 768px 是 CSS 像素，不是设备物理像素。正确做法是用 min-width 正向声明：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
article {
column-count: 1;
}
@media (min-width: 768px) {
article {
column-count: 2;
}
}
@media (min-width: 1024px) {
article {
column-count: 3;
}
}
同时记得在单栏时关掉栏间线：column-rule: none，否则会残留一条竖线。
打印 PDF 时文字挤成一团？检查这三点
Chrome 和 Edge 打印预览对 column-count 的支持不完全等同于屏幕渲染，常见破绽有：
- 没设
@page { size: A4; margin: 1cm; }，导致浏览器用默认纸张尺寸强行压缩内容 - 用了
vw/vmax单位定义字体大小，打印时这些单位失效，回退成极小默认值 - 父容器有
overflow: hidden或transform，会干扰打印引擎的分栏计算，直接禁用这些样式或用@media print覆盖
真正难的不是写出三栏，而是让同一份 HTML 在手机、桌面、打印三种场景下都保持阅读节奏——这取决于你是否在每一处单位、断点、层叠上下了克制的功夫。
