column-count没反应主因是父容器高度不足；需确保其为块级元素并设置min-height等高度限制，否则无法触发分栏渲染。
column-count设了没反应？检查父容器有没有足够高度
很多情况下写上 column-count: 3 却看不到分栏，根本原因不是属性写错，而是父容器默认高度不够——CSS分栏只对「有明确高度限制或内容撑开」的块级容器生效。如果父元素是 div 且没设 height、min-height，又恰好内容太少，浏览器可能直接按单栏渲染。
- 确保父容器是块级元素（如
div、section），且不被display: inline或浮动破坏文档流 - 给父容器加个
min-height: 200px试试，立刻能看到分栏效果 - 若内容动态加载，注意 JS 插入后要触发重排，有时需手动
offsetHeight强制触发
文字跨栏断裂难读？用break-inside和hyphens控制断点
默认分栏会把段落、列表项甚至单词硬生生劈开，阅读体验很差。这不是 bug，是 column 布局的默认行为：它优先填满栏宽，不关心语义边界。
- 阻止元素被拆开：给
p、li、h3等加break-inside: avoid - 允许单词内断行（尤其英文长词）：父容器加
hyphens: auto，并确认语言属性lang="en"已设置 - 慎用
break-before: always，它会让每个匹配元素都另起一栏，容易造成大量空白
Chrome里column-gap失效？记得补全前缀和单位
column-gap 在旧版 Chrome（-webkit-column-gap，而且值不能是无单位数字——写成 column-gap: 20 会被忽略，必须带单位，比如 20px 或 1em。
- 稳妥写法：
column-gap: 20px; -webkit-column-gap: 20px; - 别混用
gap和column-gap：Flex/Grid 的gap不影响 column 布局 - 注意
column-rule的宽度会计入column-gap总间距，实际栏间空隙 =column-gap+column-rule-width
移动端分栏错乱？viewport和字体缩放会干扰计算
在 iOS Safari 或开启「更大字体」辅助功能的设备上，column-count 可能突然变成 1 栏——因为浏览器根据缩放后字体大小重新计算了可用宽度，发现不够塞两栏就自动降级。
- 避免用
rem或em设column-width，优先用px或视口单位（如column-width: 150px） - 禁用用户缩放虽能稳定布局，但违反可访问性原则，不推荐；更合理的是监听
resize，用 JS 动态调整column-count - 测试时务必打开系统「显示缩放」和「更大字体」开关，真机比模拟器更容易暴露问题
column 布局看着简单，但它的断行逻辑、缩放响应、跨浏览器计算差异，都是藏在 column-count 后面的真实复杂点。改一个值就以为完事，往往只是把问题推到了下一次滚动或换设备的时候。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
