css3 columns专为连续文本流设计，适合长篇文章等纯文本分栏；不适用于卡片列表、导航菜单或含交互元素的容器，且在flex/grid布局中易失效。
直接说结论：CSS3 columns 属性确实能快速实现报纸式多栏布局，但“轻松”只在简单场景成立——它不支持跨栏标题、栏间不等高、内容断行不可控，且在 Flex/Grid 主流布局下容易被误用或覆盖。
什么时候该用 columns？看内容类型
它专为**连续文本流**设计，比如长篇文章、新闻摘要、博客正文。不是用来给卡片列表、表单或导航菜单分栏的。
- ✅ 适合：
<p></p>、<div> 包裹的大段纯文本，无内嵌块级交互元素 <li>❌ 不适合：含 <code><button></button>、<input>、浮动元素、绝对定位子元素的容器——这些会破坏列平衡，甚至导致渲染异常 - ⚠️ 警惕：如果内容里有
<img>，默认按原尺寸撑开单栏，需加width: 100%或break-inside: avoid控制断点 -
column-count: 3—— 强制分 3 栏，宽度随容器缩放，可能极窄（如手机上）或极宽（大屏），但栏数固定 -
column-width: 15em—— 告诉浏览器“每栏至少 15em”，实际栏数由容器宽度动态计算（比如容器宽 40em → 最多 2 栏），更响应式 - 两者同时设时，
column-width是最小宽度建议值，column-count是上限——例如columns: 4 12em表示“最多 4 栏，每栏不小于 12em” - 防止标题被劈成两半：
h2 { break-before: avoid }（注意是break-before，不是page-break-before，后者已废弃） - 避免图片跨栏撕裂：
img { break-inside: avoid } - 控制文字断行位置：
p { hyphens: auto }（需配合lang属性和浏览器支持，Chrome/Edge 默认关，Firefox 开） - 删掉意外的列间距空白：
column-gap: 1rem显式设置，别依赖默认值（不同浏览器默认值不同） - 无法指定某段内容“独占一栏”，也没有类似 CSS Regions 的内容流向控制
- 所有子元素默认按文本流分配，不支持
display: flex或display: grid子项的对齐、排序、拉伸——一旦父容器用了columns，子元素的 Flex/Grid 就基本失效 - 打印预览时行为不稳定，部分浏览器仍按单栏渲染，需额外加
@media print { columns: 1 }降级
columns 的两个关键参数怎么配？
别只写 columns: 3，它只是简写，实际生效的是 column-count 和 column-width，二者行为完全不同：
常见断裂和错位问题怎么修？
默认情况下，浏览器会随意在单词、图片、标题处断列，造成阅读断裂：
兼容性和真实限制必须知道
columns 在现代浏览器中支持良好（Chrome 50+、Firefox 52+、Safari 9+），但有两个硬伤无法绕过：
真正需要精细控制多栏（比如首栏大标题 + 三栏正文 + 底部通栏注释），还是得用 Grid 手动划分区域；columns 只适合“把一段话自动塞进几栏”的懒人场景——懒没错，但得清楚它懒在哪、不能干啥。
