3、可选添加栏线：添加 column-rule: 1px solid #ccc; 在栏之间绘制分割线。

二、分别设置 column-count 与 column-width

该方法允许更精细地控制分栏行为：column-count 强制指定栏数，而 column-width 指定每栏理想宽度；两者共存时，浏览器优先满足 column-width，再根据容器宽度动态调整实际栏数。

1、为容器设置 column-count: 4; 和 column-width: 180px;。

2、确保父容器具有明确宽度（如 width: 100%; 或固定值），否则 column-width 可能失效。

3、添加 column-fill: auto; 避免内容在首栏堆满后才流向下一栏，使各栏长度更均衡。

三、使用 break-inside 防止内容跨栏断裂

默认情况下，块级元素（如

1、为目标子元素（如段落）添加 break-inside: *oid;。

2、若需兼容旧版浏览器，补充前缀写法：-webkit-column-break-inside: *oid; 和 page-break-inside: *oid;。

QoQo是一款专注于UX设计的AI工具，可以帮助UX设计师生成用户角色卡片、用户旅程图、用户访谈问卷等。

3、注意该声明仅对非替换块级元素生效，不适用于 或 等替换元素。

四、结合 column-span 实现跨栏标题

当需要某一级标题横跨所有栏显示（如章节名），可使用 column-span: all;。该属性仅适用于绝对定位以外的块级元素，且父容器必须启用多列布局。

1、将标题元素（如

2、为该标题设置 column-span: all;，并声明 display: block;（部分浏览器要求）。

3、避免对该标题设置 float 或 position: absolute，否则 column-span 将失效。

五、响应式分栏适配不同屏幕宽度

利用媒体查询可依据视口尺寸动态调整栏数，确保小屏设备不出现过窄栏宽导致文字挤缩或换行频繁。

1、初始设置为单栏：columns: 1;。

2、当屏幕宽度 ≥ 768px 时，设置 columns: 2;。

3、当屏幕宽度 ≥ 1024px 时，设置 columns: 3; 并搭配 column-gap: 1.5rem;。