column-width 是移动端唯一靠谱的多列选择，因其能根据屏幕宽度自适应列数，避免小屏文字过窄、行高崩坏；而 column-count 会强制固定列数，导致阅读困难。
直接用 column-width，别碰 column-count —— 否则小屏上文字会被压成细条，行高崩坏、阅读困难。
为什么 column-width 是移动端唯一靠谱的选择
移动端屏幕宽度变化大，column-count: 3 这种写法会让浏览器硬切三列，哪怕容器只剩 200px 宽，结果就是每列不到 60px，中文字挤成竖线、行高塌陷、标点孤悬。而 column-width 是“最小列宽建议值”，浏览器实时计算：小屏自动退为 1 列，中屏出 2 列，大屏再升到 3–4 列，全程无需媒体查询。
-
column-width: 12rem在 16px 基准下 ≈ 192px，手机横屏常出 2 列，竖屏稳稳 1 列 - 不要同时写
column-count: 3和column-width: 14rem—— 后者会被忽略 - 真要保底两列（比如产品列表页），加
column-count: 2+column-fill: balance，防止单列过长
column-gap 用 rem 而不是 px
column-gap 控制列间空白，但它的单位选择直接影响缩放体验。用 px 会导致字体放大时间隙不变，小屏显得拥挤、大屏又太空；用 rem 或 em 则随根字号等比缩放，阅读节奏更自然。
-
column-gap: 1.5rem比column-gap: 24px更适合移动设备字体缩放场景 -
column-rule是视觉分隔线，不占布局空间，但也不会随transform: scale()或系统字体缩放变化 —— 小屏下可能太抢眼，大屏下又看不见，慎用 - 老安卓 WebView 或 iOS 13 以下不支持
column-gap，用@supports (column-gap: 1rem)包一层，降级为padding模拟间距
防止段落被割裂在两列之间
多列默认按文本流切分，段落末尾可能只剩一行句号飘在下一列开头，中文标题或短引用也容易被劈开。这不是 bug，是 CSS 的设计行为，得靠组合属性压制：
-
orphans: 2+widows: 2：确保段落首尾至少保留 2 行，避免单行孤悬 - 中文基本不用
hyphens: auto（对英文有效，需lang="en"+ 字体支持） -
break-inside: avoid加在p、h2、blockquote上，比依赖column-span: all更可靠 —— 后者在 Firefox 不支持，且只对块级元素生效
什么时候该立刻停用 columns 改用 Grid
一旦你的“多列”里混着图片、卡片、按钮、表单控件，或者需要等高、跨列合并、源顺序与视觉顺序分离，columns 就开始失控了。它本质是文本分栏引擎，不是通用布局工具。
-
img、button等块级元素在 columns 中会被打断、错位，强行用column-span: all兼容性极差 - 想让所有卡片高度一致？
columns不管这个，必须切到display: grid或display: flex - 内容含交互区域（如可点击的摘要卡片）？columns 下的焦点流和可访问性会混乱，测试时容易漏掉
真正容易被忽略的是：columns 对打印样式、屏幕阅读器的支持并不透明，尤其当内容动态加载或有 JS 插入时，列平衡可能失效，建议在关键路径上做真实设备验证，而不是只看桌面 Chrome 模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
