columns 是 shorthand 属性，同时控制列数和列宽；column-count 仅控制列数，响应式下更可控且避免隐式宽度干扰，优先级低于 columns，兼容性良好但需注意 Safari 解析严格性。
columns 是 shorthand，column-count 是其中一部分
columns 是 CSS 多列布局的简写属性，它同时控制列数和列宽；column-count 则是单独控制列数量的长写属性。两者都能实现分栏，但优先级和覆盖关系容易出错。
当你同时写了 columns: 3 和 column-count: 2，后者不会生效——因为 columns 是 shorthand，会重置所有子属性（包括 column-count 和 column-width）为初始值，再按你写的值重新解析。
-
columns: 3等价于column-count: 3; column-width: auto -
columns: 150px等价于column-width: 150px; column-count: auto -
columns: 3 200px等价于column-count: 3; column-width: 200px
column-count 在响应式中更可控
用 column-count 单独设置列数，配合 column-gap 和 column-rule，能避免 columns 的隐式宽度干扰。尤其在容器宽度动态变化时（比如移动端横竖屏切换），column-count 表现更可预测。
常见误操作：只设 columns: 3，结果小屏幕下每列太窄、文字挤成一团，却没意识到 column-width 被设成了 auto，浏览器强行压缩列宽来凑够 3 列。
- 想“至少 3 列，但每列不窄于 180px”？用
column-count: 3; column-width: 180px - 想“最多 3 列，内容少时自动变 1 列”？别依赖
column-count，它不支持“最大列数”，得靠媒体查询或 JS 检测 -
column-count值为auto（默认）时，列数完全由column-width和容器宽度决定，不受你预期控制
浏览器兼容性差异实际影响不大
从 Chrome 50、Firefox 52、Safari 10.1 开始，column-count 和 columns 都已稳定支持。IE10/11 支持但有渲染 bug：比如 break-inside: avoid 在多列中失效，或 column-rule 不显示。
真正要注意的是 Safari 对 columns shorthand 的解析更严格——如果写成 columns: 3 10em，Safari 会正确解析；但若空格不规范（如 columns: 3 10em 含全角空格），可能整条声明被忽略，而 Chrome 会宽容处理。
- 始终用半角空格分隔
columns的两个值 - 在需要兼容 iOS 13 以下版本时，避免对
column-span（仅支持all）做复杂布局 - 测试时重点看内容跨列断裂位置：Chrome/Firefox 默认按内容断行，Safari 可能多留空白
div.article {
column-count: 3;
column-gap: 2rem;
column-rule: 1px solid #e0e0e0;
}
<p>/<em> 等效的 shorthand 写法（注意顺序：先数后宽） </em>/
div.article-alt {
columns: 3 200px;
column-gap: 2rem;
column-rule: 1px solid #e0e0e0;
}</p>
列数逻辑本身简单，但和 break-before、break-inside、column-fill 这些断点控制属性混用时，不同浏览器的处理顺序差异会突然暴露。真要稳定分栏，别只盯着 column-count，得一起调 break-inside: avoid 和 column-fill: balance。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
