column-count 和 column-gap 可实现纯 CSS 多栏布局，如 article { column-count: 2; column-gap: 1.5rem; }；推荐 column-width 配合 column-count 控制响应性，用 break-inside: avoid 防止元素断行，column-rule 添加分隔线。
用 column-count 和 column-gap 可以轻松实现类似报纸的多栏布局，适合长文本、图文混排等场景，不需要额外 HTML 结构，纯 CSS 控制即可。
基础分栏：设定栏数与间距
只需给容器设置 column-count 指定栏数，再用 column-gap 控制栏间空隙：
-
column-count: 3;表示内容自动分成 3 栏（浏览器按内容流顺序填充） -
column-gap: 2rem;设置栏与栏之间的空白，默认是1em - 两者通常搭配使用，例如：
article { column-count: 2; column-gap: 1.5rem; }
控制单栏最小宽度：避免过窄断行
只设栏数可能在小屏下导致每栏太窄。可改用 column-width 配合 column-count：
-
column-width: 200px;表示“每栏尽量保持 ≥200px”，浏览器会自动算出最多能放几栏 - 加上
column-count: 4;是上限限制——实际栏数取「满足宽度前提下的最大值」，但不超过 4 - 推荐写法：
column-width: 180px; column-count: 6;，兼顾响应性与可控性
优化阅读体验：避免生硬断行与跨栏元素
默认情况下标题、图片可能被截断在两栏之间，可用以下属性调整：
立即学习“前端免费学习笔记（深入）”；
-
break-inside: avoid;加在想保持完整的块级元素上（如h2、figure），防止它被拆到不同栏 -
column-fill: balance;（默认值）让各栏高度尽量一致；设为auto则按内容顺序填满第一栏再进第二栏 - 注意：
column-rule可加竖线分隔，比如column-rule: 1px solid #eee;
基本上就这些。多栏布局轻量、语义清晰，特别适合文章页、博客列表或产品介绍模块，不复杂但容易忽略细节。
