columns属性仅对连续文本流自动分栏，不适用于卡片等复杂布局；column-width为响应式主约束，column-count为列数上限；需配合break-inside: avoid防断裂、column-fill: balance平衡列高。
columns 属性本身不直接控制布局结构，它只对连续文本流做自动分栏——如果你试图用它排版卡片、侧边栏或交互组件，结果会失控。
column-width 和 column-count 到底谁该优先？
多数人一上来就写 column-count: 3，结果小屏上列宽压到 120px，阅读困难；或者只设 column-width: 150px，大屏下却只出一列。这不是 bug，是设计逻辑：
-
column-width是“每列最小宽度”，浏览器据此动态算列数，适合响应式文本排版 -
column-count是“最多几列”，列宽随容器缩放，适合固定栏位场景（如杂志印刷） - 两者共存时，
column-width为主约束，column-count为上限：例如column-width: 200px; column-count: 4，容器宽 900px 时出 4 列（不是 4.5 列），剩余空间均分进column-gap
文字跨列断裂、图片被切开怎么防？
默认情况下，p、img、blockquote 等块级元素可能被硬劈成两半塞进不同列——这不是渲染错误，而是 columns 的默认行为。关键在子元素上加断点控制：
- 给段落加
break-inside: avoid（Safari 15.4+ 稳定支持；旧版需双写break-inside: avoid-column） - 给图片加
break-inside: avoid，同时确保其父容器没设overflow: hidden（否则截断仍会发生） - 强制某段后换列？用
break-after: column，但慎用——容易在末尾留大片空白
column-gap 和 padding/margin 容易叠加出错
很多人设了 column-gap: 2rem，再给容器加 padding: 1rem，以为内容离左右边缘是 2rem，实际却是 3rem——因为 column-gap 只作用于列与列之间，**不包含容器内边距**。
-
column-gap是列间空隙，和padding是独立计算的 - 想让内容整体居中且列间有呼吸感？统一用
padding-inline: 1rem+column-gap: 1.5rem，避免混合使用padding-left/right和column-gap - 列高不平衡？加
column-fill: balance（现代浏览器基本支持），但注意：若内容含绝对定位或 JS 动态插入，平衡会失效
columns 只适用于静态、线性、无障碍友好的纯文本流。一旦混入交互组件、动态 DOM 操作或复杂嵌套结构，它就会退化成不可预测的视觉碎片。 
