“Multi-column”译成中文就是“多列”，这个”Multi-column”是W3C给CSS3增加的一个多列布局模块（CSS Multi-column Layout Module）。它主要应用在文本的多列布局方面，对于文本的多列布局我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示
1. 列数和列宽：column-count;column-width;columns
2. 列的间距和分列样式：column-gap;column-rule-color;column-rule-style;column-rule-width;column-rule
3. 列的分栏符：break-before;break-after;break-inside
4. 跨越列：column-span
5. 填充列：column-fill
一. column-count
作用：column-count作用主要是用来描述一个Multi元素的列数
语法：column-count: auto || 数字
取值说明：
1. auto：此值为column-count的默认值，当column-count没有设置任何值时，默认的值就是auto，此时的栏数是根据别的参数来确定的，比如说列宽width
2. 数字：这里可以是任何正整数数字，但不可以带有任何单位，用来表示Multi元素分列的列数
HTML：
CSS：
首先看第一种情况：column-count:auto。前面也说过，当column-count取值为auto时，元素分栏是由其他属性决定的比如说，比如这里的column-width，具体我们来看代码如何实现
其实column-count值为auto时，可以不要显式的设置，因为其默认值就是auto，所以上面的代码中大家可以尝试的把column-count:auto这个去掉，看看结果不是不是一样。这里有一点需要说明的就是当只用column-width来控制显示的列数时，其column-width的取值最好不要超过下面公式计算出来的值
就拿本例来说，n=2,font-size:14px;那么column-width的值应该是(400-14)/2=193px（Opera下最好再减1个px，当然如果你是中文的话也最好这样做，减1-2px，至于为什么，我也说不清楚。）;当你把column-width值大于193px时，只会显示一列
上面是column-count取值为auto的使用，现在一起来看其取值为具体数值时的应用，基于前面的实例，把列数换成三列
二. column-width
作用：column-width属性是用来控制Multi元素的列宽
语法：column-width: <length> || auto
取值说明：
1. auto:此值是其默认值。如果column-width设置值为auto或者没有显式的设置值时，此时Multi元素的列宽将由其他属性来决定，比如前面的实例就是由column-count来决定的（当然column-count的值不能为auto了，不然是无效果的）
2. <length>：此值使用固定值来设置Multi元素的宽度，其单位可以是px或者em；但不能是负值
首先来看一个普通的例子，这里所说的普通就是指元素分列的列宽不指定确定的宽度值，并且其他参数都为默认值
从效果中清楚的知道，给Multi元素仅设置auto是没有任何效果的，因为此时的值是需要根据元素的列数来定的，在这里并没有指定列数的值，所以默认为1列
在上面的实例的基础上，变通一下，给他加上一个column-count:2
