CSS的columns属性可设置多列布局，如columns:3或columns:2 200px，结合column-gap控制列间距，如column-gap:25px，并用column-span:all使元素跨列显示。
在网页设计中，多列文字排版能有效提升长文本的可读性和视觉美感。CSS 提供了专门的 columns 属性和 column-gap 控制手段，让开发者可以轻松实现类似报纸、杂志的排版效果。
使用 CSS columns 属性设置多列布局
CSS 的 columns 是一个简写属性，可以同时设置列数和每列的宽度。浏览器会根据容器空间自动调整布局，适合响应式设计。
常用语法：-
columns: 3;—— 设置为 3 列 -
columns: 150px;—— 每列宽约 150px，列数由容器宽度决定 -
columns: 2 200px;—— 设置 2 列，每列宽 200px
示例代码：
.multi-column {
columns: 3 180px;
}
这个设置会让内容尽可能显示为 3 列，每列大约 180px 宽，超出容器时自动换行或调整列数。
立即学习“前端免费学习笔记（深入）”；
用 column-gap 控制列间距
column-gap 用于精确控制列与列之间的空白距离，避免文字挤在一起，提高阅读舒适度。
常见用法：-
column-gap: 20px;—— 列间留白 20 像素 -
column-gap: 1em;—— 使用相对单位，适配不同字体大小 -
column-gap: normal;—— 使用默认间距（一般为 1em）
结合前面的 columns 使用：
.article-text {
columns: 2;
column-gap: 25px;
}
这样就能创建两列文字，中间有 25px 的清晰间隔。
处理跨列元素与断行问题
在多列布局中，某些元素（如标题、图片）可能需要横跨所有列。使用 column-span 可实现这一点。
注意：-
column-span: all;让元素跨越所有列
示例：
h2 {
column-span: all;
margin: 20px 0;
}
这样章节标题就会完整显示在列上方，不会被割裂。
基本上就这些。合理使用 columns 和 column-gap，再配合 column-span 处理特殊元素，就能构建出清晰美观的多列文本布局。不复杂但容易忽略细节，比如 gap 单位选择和 span 兼容性，实际使用时建议加上测试。
