column-count 优先级更高；当同时设置时，浏览器优先满足 column-count，仅在容器过窄时才减少列数并趋近 column-width。
column-count 和 column-width 哪个优先级更高？
当同时设置 column-count 和 column-width 时，浏览器会尝试兼顾两者，但 column-width 是“建议值”，column-count 是“强制目标数”——只要容器宽度允许，浏览器优先满足 column-count；若容器太窄无法容纳指定列数，它会自动减少列数，并让每列尽可能接近 column-width。
实际开发中更推荐只设其一：内容长度固定、版面可控时用 column-count；响应式场景下优先用 column-width，配合 column-count: auto（默认值）让列数自适应。
column-gap 的单位和最小限制
column-gap 接受 length（如 1em、20px）或 normal（等价于 1em），不支持百分比。注意：Safari 旧版本（≤15.4）对 column-gap 的支持需加 -webkit-column-gap 前缀。
- 不能写成
column-gap: 5%—— 会失效 - 设为
0时，列之间无空隙，但边框/背景仍可能视觉重叠，需额外用padding或outline分隔 - 若父容器设置了
column-rule，column-gap会包含在规则两侧的空白中，不是叠加关系
multi-column 在 flex 或 grid 容器里是否生效？
不生效。column-count / column-width 等多列属性**仅对块级流内元素有效**。如果父容器是 display: flex 或 display: grid，子元素已脱离常规文档流，多列布局会被忽略。
立即学习“前端免费学习笔记（深入）”；
常见误用场景：
.container {
display: flex;
}
.container > .content {
column-count: 3; /* ❌ 不起作用 */
}解决办法：确保多列容器自身是块级（如 display: block），且未被父级 flex/grid 的布局模式覆盖。必要时可嵌套一层 <div> 专用于列布局。
内容跨列断裂时如何控制分页/断行？
浏览器默认会在列末尾切断内容，可能导致标题孤悬、图片被截断。可用以下 CSS 属性干预：
-
break-inside: avoid防止元素在列内断裂（适用于<h2>、<figure>等） -
break-before: always强制在某元素前开始新列（慎用，易造成大片空白） -
orphans和widows对多列也有效，控制段落首尾最少行数
注意：page-break-* 系列属性（如 page-break-inside）在现代多列布局中已被废弃，应统一使用 break-*。
多列布局的兼容性坑主要在 Safari 旧版和 IE（已淘汰），真正容易被忽略的是：列高不一致时，内容不会自动平衡到最短列——除非显式设置 column-fill: balance（默认值），而某些动态插入内容的场景下，JS 修改后需触发重排才能重新平衡。
