css3的多列布局是CSS3新增的一种排版模式，它可以让块级元素的内容自动分割成多个垂直的列显示，不需要开发者手动设置浮动、定位或者计算每列的宽度，非常适合长文本、图片墙这类需要多列展示的场景。其中columns属性是多列布局的简写属性，能够快速定义列的相关基础参数。
多列布局的基本概念
传统的多列排版通常需要把内容拆分成多个子元素，分别设置宽度和浮动，还要处理清除浮动、间距对齐等问题，维护成本很高。而css3的多列布局是浏览器原生支持的能力，只需要给容器设置多列相关的CSS属性，浏览器就会自动把容器内的内容按顺序分配到各个列中，列的高度会自动平衡，不需要额外处理布局逻辑。
columns属性的语法
columns是简写属性，它同时包含了column-width（列宽）和column-count（列数）两个子属性，语法格式如下：
/* 同时设置列宽和列数 */ columns: column-width column-count; /* 只设置列宽，列数由浏览器自动计算 */ columns: 200px; /* 只设置列数，列宽由浏览器自动计算 */ columns: 3;
其中column-width表示每一列的最小宽度，浏览器会根据容器宽度自动调整实际的列宽，只要不小于设置的最小值即可；column-count表示最大的列数，浏览器会尽量满足设置的列数，但如果容器宽度不够，也会自动减少列数。
columns属性的常用配套属性
除了columns简写属性，多列布局还有几个常用的配套属性，可以调整列的展示效果：
column-gap：设置列与列之间的间距，默认值是1em。column-rule：设置列之间的边框，是column-rule-width、column-rule-style、column-rule-color的简写，用法和border类似。column-fill：设置列的高度填充方式，可选值为auto（按顺序填充，可能列高度不一致）和balance（浏览器自动平衡各列高度，默认值）。
columns属性实例演示
下面通过一个长文本排版的例子，展示columns属性的实际效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>多列布局实例</title>
<style>
.multi-column {
/* 设置列宽为150px，列数最多3列 */
columns: 150px 3;
/* 列间距20px */
column-gap: 20px;
/* 列之间添加1px的灰色实线边框 */
column-rule: 1px solid #ccc;
/* 内边距20px */
padding: 20px;
/* 容器宽度800px */
width: 800px;
/* 字体大小16px */
font-size: 16px;
/* 行高1.5 */
line-height: 1.5;
}
</style>
</head>
<body>
<div class="multi-column">
多列布局是CSS3新增的实用排版特性，它可以让容器内的内容自动分割成多个垂直的列显示，不需要手动计算每列的宽度和位置。这个特性非常适合长文本的排版，比如新闻内容、文章列表等场景，能够有效减少内容的纵向高度，提升页面的可读性。使用columns属性可以快速定义列的基础参数，搭配column-gap、column-rule等属性还能调整列的细节样式，整体使用起来非常便捷，能够大幅降低多列排版的开发成本。目前主流的现代浏览器都已经支持多列布局相关的属性，开发者可以放心在项目中投入使用。
</div>
</body>
</html>运行上面的代码，浏览器会自动把文本内容分割成最多3列，每列宽度不小于150px，列之间有20px的间距和灰色边框，各列高度会自动平衡，不需要额外写任何布局逻辑。
注意事项
使用多列布局时需要注意几个问题：首先，多列布局的内容是自动分配的，如果容器内有绝对定位的元素，可能不会按照多列规则排列；其次，column-count设置的是最大列数，当容器宽度不够时，浏览器会自动减少列数，不会强制显示设置的列数；最后，多列布局目前不支持单独设置某一列的样式，所有列的样式都是统一的。
css3多列布局columns属性CSS_columns修改时间：2026-06-04 07:16:40