优先用 column-width 实现响应式多列，配合 column-count: auto；避免同时设置 column-count 和 column-width；通过 orphans/widows、hyphens、word-break 等控制断行断裂；column-rule 不占布局空间且不自动缩放；需用 @supports 作兼容降级。
column-count 和 column-width 怎么选
column-count 强制指定列数，浏览器会尽量把内容均分进这么多列里；column-width 是“建议最小列宽”，浏览器根据容器宽度自动算出实际列数，更适配响应式。
常见错误是只设 column-count: 3，结果小屏上文字挤成窄条、行高失控。真要响应式，优先用 column-width，再配合 column-count: auto（默认值）。
- 小屏下
column-width: 12rem可能只出一列，大屏自动变成三列甚至四列 - 不要同时设死
column-count和column-width，后者会被忽略 - 若需最小列数保障（比如至少两列），可用
column-count: 2+column-fill: balance防止某列过长
文字跨列断裂、标点孤悬怎么修
多列布局默认按字符流切分，容易把段落末尾的句号、引号单独甩到下一列开头，或让中文词语被硬拆开。
这不是 bug，是 CSS 多列的默认行为。修复靠两个关键属性：
立即学习“前端免费学习笔记（深入）”；
-
orphans: 2和widows: 2控制段落首尾最少保留几行（对多列也生效） -
hyphens: auto开启断字（需配合lang属性和字体支持，中文效果有限，但英文有效） - 中文更实用的是
word-break: keep-all+line-break: strict（仅 Chrome/Edge 支持较全）
注意：break-inside: avoid 对 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 有效，但对内联元素（如 <span></span>）无效；想保完整句子，得把句子包进块级容器。
column-gap 和 column-rule 的坑
column-gap 设间距很直观，但单位别乱用：百分比值在多列中表现不稳定，推荐用 rem 或 px；em 会继承父级字体大小，容易误判。
column-rule 看似像 border，但它不占布局空间——这点和 border 不同，不会撑开列宽。常被误以为“没生效”，其实是画在间隙正中，太细或颜色太浅就看不见。
-
column-rule: 1px solid #e0e0e0比column-rule: thin solid #ccc更可控 - 不要指望
column-rule响应式缩放，它不随column-width自动调整粗细 - 若列内容高度差异大，
column-rule会只画到最短列的底部，不是整栏通高
兼容性和 fallback 要不要做
Firefox、Chrome、Safari（≥14.1）、Edge（≥79）都支持原生多列，但 iOS Safari ≤14.0 有渲染错位问题，Android WebView 旧版本可能完全不渲染列间 gap。
不需要 polyfill，但要有降级意识：
- 所有列样式写在
@supports (column-count: 2)里，老浏览器直接走单列流式布局 - 别依赖多列实现核心信息层级，比如把标题塞进
column-span: all—— 这个属性兼容性更差（iOS Safari 目前不支持） - 测试时真机打开，别只信 DevTools 的响应式模式，尤其是横竖屏切换后重排行为
多列布局真正难的不是写法，是内容语义和视觉节奏的匹配。列数变来变去时，段落呼吸感、标题锚点位置、图片对齐方式全得重新校验——这些没法靠 CSS 自动解决。
