（1）CSS3 多列布局——Columns
爲了能在Web頁面中方便實現類似報紙、雜誌那種多列排版的佈局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應用在文本的多列布局方面，這種佈局在報紙和雜誌上都使用了幾十年了，但要在Web頁面上實現這樣的效果還是有相當大的難度，慶幸的是，CSS3的多列布局可以輕鬆實現。
語法：columns：<column-width> || <column-count>
多列布局columns屬性參數主要就兩個屬性參數：列寬和列數。
|
參數 |
參數說明 |
|
<column-width> |
主要用來定義多列中每列的寬度 |
|
<column-count> |
主要用來定義多列中的列數 |
舉例：要顯示2欄顯示，每欄寬度爲200px，代碼爲：columns: 200px 2;
到目前爲止大部分主流瀏覽器都對其支持：
（2）CSS3 多列布局——column-width
column-width的使用和CSS中的width屬性一樣，不過不同的是，column-width屬性在定義元素列寬的時候，既可以單獨使用，也可以和多列屬性中其他屬性配合使用。
語法：column-width:auto | <length>
取值說明
|
屬性值 |
說明 |
|
auto |
如果column-width設置值爲auto或者沒有顯式的設置值時，元素多列的列寬將由其他屬性來決定，比如前面的示例就是由列數column-count來決定。 |
|
<length> |
使用固定值來設置元素列的寬度，其主要是由數值和長度單位組成，不過其值只能是正值，不能爲負值。 |
（3）CSS3 多列布局——column-count
column-count屬性主要用來給元素指定想要的列數和允許的最大列數。
語法：column-count：auto | <integer>
取值說明：
|
屬性值 |
屬性值說明 |
|
auto |
此值爲column-count的默認值，表示元素只有一列，其主要依靠瀏覽器計算自動設置。 |
|
<integer> |
此值爲正整數值，主要用來定義元素的列數，取值爲大於0的整數，負值無效。 |
例如：將列分成四列顯示，代碼如下：column-count:4;
（4）CSS3 列間距column-gap
column-gap主要用來設置列與列之間的間距。
語法：column-gap:normal || <length>
取值說明
|
屬性值 |
屬性值說明 |
|
normal |
默認值，默值爲1em（如果你的字號是px，其默認值爲你的font-size值）。 |
|
<length> |
此值用來設置列與列之間的距離，其可以使用px,em單位的任何整數值，但不能是負值。 |
例如：將內容分三列顯列，列與列之間的間距爲2em，實現代碼爲：
column-count: 3;
column-gap: 2em;
（5）CSS3 列表邊框column-rule
column-rule主要是用來定義列與列之間的邊框寬度、邊框樣式和邊框顏色。簡單點說，就有點類似於常用的border屬性。但column-rule是不佔用任何空間位置的，在列與列之間改變其寬度不會改變任何列的位置。
語法規則：column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
取值說明：
|
屬性值 |
屬性值說明 |
|
column-rule-width |
類似於border-width屬性，主要用來定義列邊框的寬度，其默認值爲“medium”，column-rule-width屬性接受任意浮點數，但不接收負值。但也像border-width屬性一樣，可以使用關鍵詞：medium、thick和thin。 |
|
column-rule-style |
類似於border-style屬性，主要用來定義列邊框樣式，其默認值爲“none”。column-rule-style屬性值與border-style屬值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。 |
|
column-rule-color |
類似於border-color屬性，主要用來定義列邊框顏色，其默認值爲前景色color的值，使用時相當於border-color。column-rule-color接受所有的顏色。如果不希望顯示顏色，也可以將其設置爲transparent(透明色) |
例如：爲了能有效區分欄目列之間的關係，可以爲其設置一個列邊框，代碼爲：
column-rule: 2px dotted green;
（6）CSS3 跨列設置column-span
column-span主要用來定義一個分列元素中的子元素能跨列多少。column-width、column-count等屬性能讓一元素分成多列，不管裏面元素如何排放順序，他們都是從左向右的放置內容，但有時我們需要基中一段內容或一個標題不進行分列，也就是橫跨所有列，此時column-span就可以輕鬆實現。
此屬性的語法如下：column-span:none | all
取值說明
|
屬性值 |
屬性值說明 |
|
none |
此值爲column-span的默認值，表示不跨越任何列。 |
|
all |
這個值跟none值剛好相反，表示的是元素跨越所有列，並定位在列的Ｚ軸之上。 |
例如：將第一個標題跨越所有列，代碼：column-span:all;
效果如下：
附：以上內容整理自慕課網