优先选column-width实现响应式可读性，用column-count兜底防过度分列；二者共存时column-width为主约束、column-count为上限。
column-count 和 column-width 到底该选哪个
多数人一上来就写 column-count: 3，结果在小屏幕上列宽窄得没法读；或者只设 column-width: 150px，又发现大屏下只出一列——问题不在属性本身，而在没理解它们的协作逻辑。
column-count 是“最多分几列”，浏览器会尽量满足，但可能因内容太少或容器太窄而少于设定值；column-width 是“每列理想宽度”，浏览器会根据容器宽度自动算出实际列数，且优先尊重它。
- 想保列数（比如杂志式固定三栏布局）：用
column-count，同时加column-gap和column-rule控制间距与分隔线 - 想保可读性（响应式优先）：只设
column-width，让浏览器自己决定列数，再用column-count: 8（或更大）兜底防过度分列 - 两者都设时，
column-width是主约束，column-count是上限——例如column-width: 200px; column-count: 4，容器宽 900px 时会出 4 列（不是 4.5 列），每列约 200px，剩余空间均分到column-gap
文字跨列断裂、图片被切开怎么办
默认情况下，段落、图片、表格等块级元素可能被硬生生劈成两半塞进不同列里，阅读体验极差。这不是 bug，是 columns 的默认行为。
关键控制点是 break-inside 和 break-after，它们作用于子元素，而非容器本身。
- 阻止段落断开：给
p或div加break-inside: avoid - 防止图片被切：给
img加break-inside: avoid，同时确保其父容器没设overflow: hidden（否则会截断） - 强制某段后换列：在该段末尾元素上加
break-after: column，但慎用——容易在末尾留大片空白 - 注意兼容性：
break-inside: avoid在 Safari 15.4+ 才稳定支持，旧版需配合break-inside: avoid-column双写
column-gap 和 padding/margin 的叠加陷阱
很多人设了 column-gap: 2rem，再给容器加 padding: 1rem，以为内容离左右边缘有 1rem + 1rem = 2rem，实际却是 1rem + 2rem = 3rem——因为 column-gap 是列与列之间的空隙，**不包含容器内边距**。
更隐蔽的问题是：当列内容高度不一致时，column-gap 的视觉对齐只发生在顶部，底部会参差不齐，看起来像 gap “失效”了。
- 列间距离必须用
column-gap，别试图用子元素margin-right模拟，否则最后一列也会多出右边距 - 想让首列左边缘和末列右边缘对齐容器内边距？直接用
padding-left/padding-right即可，它和column-gap互不干扰 - 避免用
margin调整列内元素位置来“凑”gap 效果，这会让break-inside: avoid失效
Firefox 下 column-fill: auto 行为异常
Chrome 和 Safari 默认按列“顺序填满”，即第一列填满再填第二列；Firefox 默认是“平衡填满”，各列高度尽量一致。这会导致同一份 HTML/CSS 在 Firefox 中列高一致、其他浏览器则首列明显更高——如果设计依赖视觉平衡（比如带背景色的列），就会露馅。
统一行为只需一行：column-fill: auto（Chrome/Safari 默认值）或 column-fill: balance（Firefox 默认值）。但注意：
-
column-fill: balance在内容少于两列高度时，Firefox 仍可能把所有内容塞进第一列——这不是 bug，是性能优化，避免为少量内容强行计算平衡 - 若必须严格平衡，且内容动态加载，建议监听
resize并用setTimeout(() => { /* 强制重排 */ }, 0)触发重计算 -
column-fill不支持部分取值动画，别对它做 CSS transition
多列排版真正难的不是写对那几行 CSS，而是意识到 column 属性操作的是「内容流的视觉切片」，而不是「网格容器」——一旦拿 flex 或 grid 的思维去套，十有八九掉坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
