用 column-count 做报纸式多栏布局可行，但必须配合 column-gap、break-inside 和内容流控制，否则段落断裂、图片错位、标题被截断是常态；根本原因是浏览器按高度切片且不识别语义，需用 break-inside: avoid 显式保护不可分割元素，并通过媒体查询在小屏重置为单列。
直接说结论：用 column-count 做报纸式多栏布局可行，但必须配合 column-gap、break-inside 和内容流控制，否则段落断裂、图片错位、标题被截断是常态。
为什么 column-count 渲染出的栏经常“断得奇怪”？
CSS 多列本质是把块级内容按高度切片，浏览器不理解语义——它会把一个 <p></p> 从中间劈开，让前半段在第一栏、后半段在第二栏。常见现象包括：
- 段落文字被硬生生切成两半，跨栏显示
-
<h2></h2>标题卡在栏底，下半部分跳到下一栏开头 -
<img>被拉伸变形或只显示一半
根本原因：默认所有元素都允许分栏断开。解决思路不是“阻止分栏”，而是“告诉浏览器哪些地方不能断”。
必须加的三个关键样式：防止断点乱入
仅设 column-count: 3 是无效的。以下三行要一起写：
article {
column-count: 3;
column-gap: 1.5rem;
column-rule: 1px solid #e0e0e0;
}
<p>/<em> 阻止段落、标题、图片被切断 </em>/
article p,
article h1,
article h2,
article h3,
article img {
break-inside: avoid;
}</p>
注意：break-inside: avoid 在 Safari 中需加 -webkit-column-break-inside: avoid 兼容；column-gap 不能用 margin 替代，后者不参与列间距计算。
column-fill: balance 为什么有时反而让栏高不一致？
默认值 column-fill: balance 会让各栏高度尽量相等，但若内容总高度无法被整除，最后一栏可能明显短一截——尤其当内容含固定高元素（如广告图）时。此时可尝试：
- 显式设
column-fill: auto，让内容顺序填满，栏高自然不等但更可控 - 对容器设最小高度（如
min-height: 50vh），避免过短内容导致单栏撑不满 - 避免在多列容器内嵌套 flex/grid 布局，它们会干扰列流计算
真正影响视觉平衡的是内容本身是否均匀，而不是靠 CSS 强行“拉平”。
响应式中怎么安全地关掉多栏？
小屏下三栏挤成窄条，字太小、行距塌陷。别只用 max-width 切换，要预防断点残留：
@media (max-width: 768px) {
article {
column-count: 1;
column-gap: 0;
column-rule: none;
}
/* 清除之前设的 break-inside，防止小屏下块元素堆叠异常 */
article p,
article h2,
article img {
break-inside: auto;
}
}
容易忽略的一点：如果父容器有 overflow: hidden，在 column 模式下可能裁掉最后一栏内容，调试时先检查这个。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
