这是 CSS 3 提供的一个新布局，多列布局，其实顾名思义我们都知道多列布局是个啥。

如果读者学过 bootstrap，应该了解什么叫做栅格布局，这玩意儿就很像栅格布局。多列布局由很多属性组成，下面一个一个介绍。

column-count 用于设置列数，比如 column-count:3;，则表示设置为三栏，效果如下：

这就实现了三栏布局，这开发效率显然远优于浮动布局。

接下来是 column-width，这个用于设置每一列的理想宽度，或者说是最小宽度，比如下面我将每一列设置成了 500 像素，那么如果可以容得下两列，就会放两列，如果容不下两列，就会放下一列，但会始终保持每一列的宽度大于我给定的 500 像素。

column-width 和 column-count 可以简写为 columns，这个属性可以填入两个值，分别是列数和每一列的最小宽度。

我们可以看到，每一列之间都有空隙吧，我们可以通过 column-gap 设置空隙大小，像素，百分比，或者其他单位均可。

空隙之间默认是啥也没有的空白，我们也可以通过设置 column-rule 来设置，这里的值和 border-style 一样，比如 solide 是实线，dashed 是虚线，实际上这个属性的用法和 border 完全一致，border 是 border-style, border-color, border-width 的简写，这个 column-rule 也是 column-role-style，column-role-width, column-role-color 的简写。

在表格布局中，我们学到了一个 colspan 属性，这个属性可以用来跨列，同样，这种分列布局也提供了 column-span 的属性，也可以用来跨列。

使用这个属性就可以实现这样一个效果，此时 TEST 这个标题就横跨了所有列，TEST 这一整均不显示内容，让 TEST 跨了所有列。

column-span 和表格中的 colspan 不太一样，colspan 可以指定跨多少列，但是 column-span 只有两个取值，分别是 none 和 all，即不跨列和跨所有列，因此如果我们要在多列布局里面跨列就必须一次性跨一整列，不能说只垮部分列这种情况。

还有一个 column-fill 属性用于平衡每一列的高度，如果设置为 balance 则会自动平衡高度。