CSS并不简单：多栏布局（Multi-Columns Layout）

多栏布局是CSS3新增布局中的一种，尽管它很低调。

一、明确结构

  多栏布局的结构很简单，主要由multi-column container和column box组成。

  当一个元素设置了column-width和column-count属性并且值不为auto，那么这个元素就是multi-column container。

  multi-column container内部通过多个column box来展示内容。

二、了解基本用法

1、column-count和column-width

  通过这两个属性，我们可以控制分栏的数目，但是相比较count属性，width属性就显得很灵活。

  当设置width属性之后，并不是说分栏的宽度就是这个固定的值，它还会结合分栏布局容器中的宽度灵活的多增少减。

2、column-rule和column-gap

  这两个属性主要帮助我们设置分栏之间的间隙以及分栏的样式，还是比较好理解的：

  这里你可以将column-rule的宽度设置的大一些，会有惊奇的发现哦。

3、column-span

  这个属性