CSS columns属性用于在某个元素中制作多列布局，它可以同时设置和属性。

通过CSS columns属性，你可以为多列布局同时设置列的宽度和列的数量。如果你只设置了一个值，那么没有指定的值会使用它的初始值。

如果多列布局元素使用绝对单位，而不是百分比单位的情况下，通常不建议同时设置和属性，这样会不利于制作响应式的多列布局。

如果设置的列宽度和数量不能适配容器的宽度，浏览器会根据实际情况减少列的数量，来适应指定的列宽度。如果列的数量减少到1，列的宽度仍然比容器宽度大，那么列的宽度页会被减小来适应容器的宽度。

如果列的宽度设置的过小，容器中放置了指定数量的列之后，还有剩余的空间，那么浏览器会将列的宽度拉伸，使列占据整个容器空间。

官方语法

columns: <'column-width'> ||  <'column-count'>       
                            

参数：

• <'column-width'>：指定列的宽度，数据类型。详细信息参考属性。
• <'column-count'>：指定列的数量。整数数据类型。详细信息参考属性。

column-span属性的初始值为 auto auto。

应用范围

column-span属性可以应用在块级元素，表格单元格和内联块级元素上，不能应用在表格上。

示例代码

下面是columns属性的一些取值示例代码：

columns: 1em;
columns: 1;
columns: auto;
columns: 1 auto;
columns: auto 12em;
columns: auto auto;                           
                            

在线演示

下面是一个使用columns属性的在线示例：

浏览器支持

columns属性的浏览器兼容性如下图所示：

IE10+和Edge浏览器以及Opera Mini浏览器支持columns属性。Firefox浏览器需要添加-webkit-前缀：-moz-columns，Safari 和 Chrome浏览器需要添加-webkit-前缀：-webkit-columns。