CSS多列布局用column-count或column-width控制列数与列宽，二者互斥；需用break-inside: avoid防止内容截断，::first-line和::first-letter仅对首列生效，移动端须用媒体查询适配。
用 column-count 或 column-width 控制列数与列宽
HTML5 本身不提供“多列布局”标签，真正起作用的是 CSS 的多列模块（CSS Multi-column Layout）。核心是给容器设置 column-count（指定列数）或 column-width（指定每列最小宽度），浏览器会自动分栏、断行、平衡列高。
两者互斥：同时设时，column-width 是最小建议值，column-count 是上限；浏览器优先满足 column-width，再尽可能接近 column-count。
-
column-count: 3→ 强制分 3 列（内容少也会撑出 3 列空白） -
column-width: 180px→ 每列至少 180px 宽，实际列数由容器宽度动态决定 - 推荐组合：
column-width: 16rem+column-gap: 1.5rem+column-rule: 1px solid #eee，兼顾响应性和可读性
避免内容在列间被错误截断
默认情况下，段落、图片、块级元素可能在列中间被切断（比如一个 被劈成两半）。需用 break-inside 显式禁止：
h2, h3, p, img {
break-inside: avoid;
}
注意：break-inside: avoid 在部分旧版 Safari 中支持不稳定，若需兼容 iOS 14 以下，可加前缀 -webkit-column-break-inside: avoid。另外，display: inline-block 或 float 元素天然不会跨列，但会破坏流式布局逻辑，慎用。
立即学习“前端免费学习笔记（深入）”；
处理分栏后首行/首字样式丢失
多列容器内，::first-line 和 ::first-letter 伪元素只对第一列生效——这是规范行为，不是 bug。如果需要每列首行缩进或首字下沉，CSS 无原生支持，必须换思路：
- 用
column-span: all让标题横跨所有列（仅适用于等独立块，且父容器必须是多列容器） - 首字下沉改用绝对定位 +
float: left模拟，但要手动计算每列起始位置（不推荐） - 更稳妥的做法：放弃每列首字样式，统一用
text-indent控制段落首行缩进
移动端适配与性能注意点
小屏幕下硬设 column-count: 3 会导致列过窄、文字挤成一团。务必配合媒体查询重置：
@media (max-width: 768px) {
.article-content {
column-count: 1;
column-gap: 0;
}
}
另外，含大量图片或复杂子元素的多列容器，滚动时可能出现重排卡顿（尤其 Android WebView）。可加 will-change: contents 提前提示渲染引擎，但不要滥用——仅在实测有卡顿时添加。
真正难的不是写几行 CSS，而是判断「这里是否适合用多列」：新闻正文、长篇说明文档可以；表单、导航菜单、卡片列表不行。列间没有语义隔离，搜索引擎和屏幕阅读器仍按 DOM 顺序读取，视觉分栏 ≠ 逻辑分组。
