新闻网站优先用column-count；因其正文长度固定、结构清晰，需稳定输出2或3列，避免column-width在窄屏仅1列、宽屏达4列导致排版节奏混乱。
column-count 和 column-width 选哪个？
直接说结论：新闻网站优先用 column-count，而不是靠 column-width 控制列数。因为新闻正文长度固定、结构清晰，你更需要“稳定输出 2 列或 3 列”，而不是让浏览器自己猜——比如在窄屏下 column-width: 200px 可能只撑出 1 列，宽屏下又蹦出 4 列，排版节奏就乱了。
但注意：column-count 不是绝对刚性。如果内容太少（比如只有两行字），浏览器可能仍只渲染 1 列；它保证的是“尽可能分出指定列数”，不是“强行切开”。所以真实项目里建议搭配 min-height 或预留足够文本量。
-
column-count: 2是中文新闻最安全的起点（兼顾手机横屏和桌面端） - 想响应式？用媒体查询切，别指望
column-width自动适配小屏——它在移动端常导致单列过窄、字太挤 - 同时设
column-count和column-width？可以，但column-count会变成“最大列数”，实际列数由宽度优先决定，容易失控
column-rule 怎么加才不穿帮？
column-rule 看似简单，但加完发现竖线没显示、断成几截、或者盖住文字？大概率是踩了这三个坑：
- 没设
column-gap：竖线画在列间隙里，如果间隙为 0，线就叠在文字上或被裁掉；至少留column-gap: 1em或16px - 线太粗：比如
column-rule: 4px solid #ccc，但column-gap只有12px，WebKit 内核（Chrome/Safari）直接不渲染这条线 - 颜色对比弱：浅灰线配浅灰背景，尤其在 Retina 屏上几乎隐形；建议用
#999起步，或加一点透明度如rgba(0,0,0,0.1)
推荐写法：column-rule: 1px solid rgba(0,0,0,0.08); column-gap: 1.5em; —— 细、淡、稳，不抢内容，也不消失。
立即学习“前端免费学习笔记（深入）”；
标题跨列（column-span: all）为什么经常失效？
常见现象：给 <h2> 加了 column-span: all，但它还是乖乖待在第一列里。原因很实在：
- 父容器没启用多列：
column-span只对多列容器的**直系子元素**生效，如果父级没设column-count或columns，这条规则直接被忽略 - 元素不是块级：
column-span对<span>、<em>这类内联元素无效，必须是display: block或flow-root等块格式化上下文 - CSS 优先级被覆盖：比如某个重置样式表写了
h2 { column-span: none !important; }，就会压过你的设置
实操检查顺序：确认父容器有 column-count → 检查该标题是否为直接子元素 → 查看 computed style 确认 column-span 是否被计算为 all。
移动端适配时 column 布局最容易漏哪一环？
很多人写了桌面端三列，加个媒体查询改成 column-count: 1 就以为完工了——但忽略了行高、字间距、段落缩进这些在单列下会突然“变胖”的细节。
- 单列时
line-height建议调小（比如从1.7改成1.5），否则行距过大，阅读节奏断裂 -
column-gap在单列下应设为0或normal，否则空白带还在，像卡了一条隐形缝 - 别忘了重置
column-rule：单列下还留着竖线，视觉上就是一条突兀的边框
真正干净的响应式不是只切列数，而是把多列当成一种“模式”，单列时回归常规流式布局逻辑——竖线、间隙、跨列标题，统统归零再出发。
