CSS column-count属性用于指定列的数量。该属性允许你将一个容器中的内容按指定的列数排列为多列布局。

如果你没有指定属性，浏览器会根据容器的空间大小来自动分配列的宽度。

为了制作更加弹性和响应式的多列布局，如果你的多列容器设置了固定的宽度，不建议同时使用和column-count属性。

使用column-count属性可以制作出类似杂志的多列布局效果，例如，如果将column-count属性的值设置为3，会得到类似下图的效果：

官方语法

column-count: <integer> | auto                  
                            

参数：

• <integer>：指定列的最佳数量。数值必须大于0。如果同时指定了和column-count属性，并且它们的值都不是auto，那么<integer>参数值表示列的最大数量。
• auto：由其它列属性来决定列的宽度。（例如属性）

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

应用范围

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

示例代码

下面是column-width属性的一些取值的示例代码：

column-count: 3;
column-count: auto;

column-count: inherit;                    
                            

经常可以看到多列布局的响应式效果，例如Bootstrap的网格系统，在大屏幕上显示4列，在中等屏幕上显示2列，在小屏幕上显示为1列。下面的代码通过媒体查询来模拟这个效果。

div {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

@media screen and (max-width: 30em) {
    div {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}
                            

在线演示

下面是一个响应式多列布局的实际例子，调整你的浏览器窗口，看看列的变化情况：

浏览器支持

column-count属性的浏览器兼容性如下图所示：

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