column-width比column-count更适合响应式文本，因其设最小列宽由浏览器自动计算列数，小屏自动退为1列，避免文字挤压；而column-count强制列数，窄屏下易导致列过窄、阅读困难。
直接用 columns 配合 column-width，别硬写 column-count，否则小屏上文字会被压成细条、行高崩坏。
为什么 column-width 比 column-count 更适合响应式文本
column-count 是“强制列数”，浏览器会把内容硬切成指定列数，不管容器多窄；column-width 是“最小列宽建议值”，浏览器根据容器实时算出能放几列，天然适配不同宽度。
- 只设
column-count: 3：手机上三列挤成 100px 宽，字小行密，阅读吃力 - 改用
column-width: 14rem：小屏自动变 1 列，中屏 2 列，大屏 3–4 列，无需媒体查询 - 不要同时写死
column-count和column-width，后者会被忽略 - 真要保底列数（比如至少两列），加
column-count: 2+column-fill: balance防止单列过长
怎么防止文字跨列断裂和标点孤悬
多列默认按字符流切分，句号、引号、中文词可能被甩到列首或列尾——这不是 bug，是 CSS 行为。修复靠三个属性协同：
-
orphans: 2和widows: 2：确保段落首尾至少保留 2 行，避免单行句号飘在下一列开头 -
hyphens: auto：对英文有效（需lang="en"+ 字体支持），中文基本无效 -
word-break: keep-all+line-break: strict：中文不断词，但仅 Chrome/Edge 支持较全；Safari 建议降级用break-inside: avoid包裹段落
column-gap 和 column-rule 的实际影响
column-gap 控制列间空白，推荐用 em 或 rem 单位，随字体缩放；column-rule 是视觉分隔线，不占布局空间，也不会随容器缩放——这点容易被忽略。
-
column-gap: 2rem在 16px 基准下是 32px，放大字体时自动变宽，比固定px更合理 -
column-rule: 1px solid #eee看似简单，但缩放时粗细不变，大屏下可能显得太细，小屏下又太抢眼 -
column-rule不触发重排，也不影响column-width计算，但它不会响应transform: scale()或 zoom - 需要兼容老浏览器？用
@supports (column-gap: 1rem)包一层，降级为padding模拟间距
什么时候该换 Grid 而不是 columns
当你的“多列”里混着标题、图片、卡片等非纯文本块，或者需要等高、跨列合并、源顺序独立时，columns 就力不从心了——它只管文本流，其他元素会被打断或错位。
-
columns本质是文本分栏，h2、img这类块级元素默认不能跨列，得靠column-span: all，但兼容性差（Firefox 不支持） - 想让每张卡片高度一致？
columns不管这个，得切到display: grid或display: flex - 真正麻烦的是混合内容：一段文字 + 一张图 + 一个按钮，用
columns很难控制它们的相对位置和断点行为 - 如果必须用
columns，就把非文本内容全包进div并设break-inside: avoid，但别指望它在所有浏览器里都稳
最易被忽略的一点：多列文本的可访问性。屏幕阅读器仍按 DOM 顺序读，不会按视觉列流切换；若内容逻辑依赖列序（比如左列定义、右列示例），columns 会破坏语义流——这种场景，宁可用 Grid 分两栏并显式标记 aria-labelledby。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
