column-count未生效是因浏览器按内容和容器宽度动态调整列数，需确保容器有明确宽度、内容足够长且避免与Flex/Grid混用。
column-count设了几列却没生效？检查容器宽度和内容长度
多列布局不是“设了就成”，column-count 只是建议列数，浏览器会按实际内容和容器宽度动态调整。如果容器太窄、内容太少，或者父元素设置了 overflow: hidden 或 display: inline，都可能让列数降为 1。
- 确保容器有明确宽度（比如
width: 600px或max-width），不能依赖fit-content或未约束的 flex 子项 - 内容至少得有一段足够长的文本（或强制换行的块），纯空格、单个短单词、或全是
display: inline-block的小盒子，容易被压成一列 - 避免在容器上设
column-count的同时又用flex或grid布局——CSS 多列和 Flex/Grid 不兼容，后者会直接禁用列布局
column-gap为啥没空隙？注意它不继承、也不受box-sizing影响
column-gap 默认值是 0，而且它只作用于列与列之间，对首尾外边距无效。它不会被子元素继承，也不会因为 box-sizing: border-box 而缩进——它的值就是纯粹的空白距离。
- 必须显式设置，例如
column-gap: 2rem；写成column-gap: 0和不写效果一样（都是无间隙） - 单位推荐用
rem或em，避免用px在高DPI屏上显得过窄 - 如果用了
column-rule（比如column-rule: 1px solid #ccc），column-gap是规则线两侧的空白，不是“线到文字”的距离——实际留白 =column-gap+ 半条线宽
文字跨列断裂难看？用break-inside和hyphens控制断点
CSS 多列默认会在任意字符位置断行，导致标题被切成两半、图片被撕开、表格错位。这不是 bug，是规范行为——但可以干预。
- 阻止块级元素跨列：给
h2、figure、blockquote等加break-inside: avoid - 允许单词内断行（尤其英文长词）：设
hyphens: auto，并确保lang属性正确（如lang="en"），否则不触发 - 慎用
break-before: always：它会让每个匹配元素都独占一列开头，容易造成大量空白列
Chrome/Firefox/Safari 表现不一致？别信“支持良好”这种说法
column-count 和 column-gap 在各浏览器中渲染逻辑不同：Firefox 优先保列数，Chrome 偏好保最小列宽，Safari（尤其是旧版）对 break-inside 支持极差。
立即学习“前端免费学习笔记（深入）”；
- 测试时务必打开开发者工具的“Layout”面板，看实际分列节点是否符合预期，不要只靠肉眼判断
- 移动端 Safari 对
column-fill: balance几乎无效，列长严重不均，如有严格平衡需求，得用 JS 补偿或换方案 - 打印样式表里多列常失效——很多浏览器打印预览直接忽略
column-*，需要单独写@media print回退样式
真正麻烦的不是怎么写，而是怎么验证它在不同内容长度、不同屏幕缩放、不同用户字体设置下依然稳定。列数只是起点，断点控制和浏览器实测才是落地关键。
