column-count无效主因是容器宽度不足或内容过少；需设明确宽度、足够内容，并避免overflow:hidden截断；column-gap和column-rule需配合使用；column-fill: auto可改善不均衡分布；响应式推荐column-width优先。
column-count设了没效果？检查容器宽度和内容是否足够
很多情况下 column-count 看似不生效，其实是容器太窄或内容太少——CSS多列布局需要「可分空间」。浏览器不会强行把一行字切成三列塞进200px宽的盒子，它会退回到单列显示。
实操建议：
- 确保父容器有明确宽度（比如
width: 600px或max-width），且大于单列内容自然宽度 - 内容至少要有几段文字或足够长的块级元素；纯空格、单行短文本、
display: inline元素都难触发分栏 - 避免父容器设置了
overflow: hidden且高度受限，这可能截断列尾，让人误以为没分栏
column-gap和column-rule用不好？注意它们不继承，且影响可读性
column-gap 默认是 normal（约1em），但实际渲染受字体、字号影响；column-rule 类似 border，但它只画在列之间，不是每列边缘。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 加了
column-rule: 1px solid #ccc却看不到线 → 检查是否漏设column-gap（间隙太小，线被挤没） - 文字紧贴列边，阅读吃力 →
column-gap至少设1.5rem或24px，比默认值更友好 - 在 Flex/Grid 容器里嵌套多列 → 多列是块级格式化上下文，
column-gap不会和父级gap合并，行为独立
column-fill: balance 是默认值，但某些场景下它反而让排版难看
浏览器默认按「各列高度尽量相等」来分配内容，这对短文本很友好，但遇到大图片、break-inside: avoid 的卡片、或固定高 iframe 时，容易出现某列空一大截，另一列堆满。
这时可以改用：
-
column-fill: auto：按文档流顺序填满第一列再进第二列（类似报纸排版） - 配合
break-inside: avoid在子元素上使用，防止卡片被劈成两半 - 注意 Safari 旧版本对
column-fill支持不稳定，如需兼容可考虑 JS 辅助分页
响应式多列布局怎么写？别只靠 media query 切 column-count
单纯在不同屏幕设 column-count: 1 / 2 / 3 容易导致列宽忽大忽小，尤其在平板横竖屏切换时，文字行长剧烈变化，影响阅读节奏。
更稳妥的做法：
- 用
column-width替代column-count（例如column-width: 18em），让浏览器自动算列数 - 再用
column-count做上限兜底：column-width: 18em; column-count: 4;，防止单列过窄 - 避免在
font-size频繁变化的响应式规则里直接改column-count，优先调column-width+ 字号联动
真正麻烦的是跨列元素（比如标题要横跨所有列），column-span: all 兼容性尚可，但它的位置计算依赖块格式化上下文，稍不注意就会脱离预期流。这种时候，不如老实用 Flex/Grid 控制主结构，多列只留给纯文本流。
