移动端分栏不能直接用 column-count: 3，应改用 column-width 响应式分栏或 flex/grid 实现视觉分栏；前者适配纯文本，后者适用于结构化卡片布局。
移动端分栏不能直接套用 PC 的 column-count: 3 —— 多数情况下会出一栏、文字挤成一团，或 Safari 下列宽跳变。真正能落地的方案只有两个：用 column-width 配合媒体查询做响应式分栏，或改用 flex/grid 做视觉分栏（但语义完全不同）。
为什么 column-count 在移动端基本失效
它强制指定栏数，而移动端屏幕宽度变化剧烈，column-count: 3 在 320px 宽度下硬分三栏，每栏只剩约 80px，浏览器宁可只出一栏也不让文字无法阅读；同时 iOS Safari 对 column-count 的重排逻辑不稳定，横竖屏切换后常卡在旧列数不动。
- 实际现象：页面加载时显示两栏，旋转手机后仍卡在两栏，内容堆叠溢出
- Android WebView（尤其旧版）对
column-gap支持差，设了也无效，列紧贴着 -
break-inside: avoid在移动端多列中支持极差，Chrome 和 Safari 表现不一致，常导致标题被截断在两列之间
用 column-width 实现真正响应式的文本分栏
让浏览器按最小栏宽自动算栏数，比死守数字更靠谱。搭配 max-width 和媒体查询，能自然退化为单栏。
- 基础写法：
.article { column-width: 180px; column-gap: 1rem; column-rule: 1px solid #eee; } - 必须加
max-width: 100%或明确宽度（如width: 100vw），否则在部分 Android 浏览器里不触发分栏 - 在小屏下加媒体查询强制单栏：
@media (max-width: 480px) { .article { column-count: 1; } }，比靠column-width自动降栏更可控 - 避免给容器设
height—— 移动端滚动流式内容，固定高度会导致底部内容不可见
什么时候该放弃 multi-column，改用 flex 或 grid
当你分的是卡片、商品项、带图片/按钮的结构化块，而不是纯段落文本时，multi-column 就是错的选择——它会把卡片从中间劈开，按钮一半在左栏一半在右栏。
立即学习“前端免费学习笔记（深入）”；
- 三列卡片布局用 Flex：
.cards { display: flex; flex-wrap: wrap; gap: 12px; } .card { flex: 0 0 calc(33.333% - 8px); }，注意用calc()减去 gap 占位 - 更稳的 Grid 写法：
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }，auto-fill确保小屏也能填满一行 - 别在同一个容器上既设
display: grid又设column-count—— 浏览器忽略后者，调试时白忙活
column-span: all 在移动端几乎没用
想让章节标题横跨所有列？理论上可以，但实际在 iOS Safari 16.4 之前完全不支持，且必须满足三个苛刻条件：元素是分栏容器的**直接子元素**、是块级元素、没设 float 或 position: absolute。绝大多数移动端模板里，标题都包在 <header></header> 或 <div class="section"> 里，<code>column-span: all 直接失效。
更现实的做法：在媒体查询里对小屏取消分栏，标题自然独占一行；大屏则靠 column-width + 足够宽的容器，让标题本身不触发换栏（它默认不会被切开）。
