columns樣式屬性使用
columns：用於設置元素的列寬和列數。它是column-width和column-count的簡寫屬性。
語法：
columns: <'column-width'> || <'column-count'>;
column-width：用來設置列寬，取值auto和像素值，實際寬度可能會更寬或更窄以適合可用空間。column-count：用來設置元素內容被划分成幾列，取值auto和正整數。如果取值和列的寬度都非auto，則它僅指示允許的最大列數。
兼容性：
查看案例 Demo
column-width樣式屬性使用
column-width：用於單獨設置元素的列寬。
語法：
column-width: auto | length;
auto：默認值，由瀏覽器決定寬度。length：單位值，用來這只每一列的寬度，當設置了column-count的時候優先把內容划分指定列數，寬度將自適應。
兼容性：
查看案例 Demo
column-count樣式屬性使用
column-count：用於單獨設置元素的列數。
語法：
column-count: auto | number;
auto：默認值，由其他屬性決定列數，比如column-width，當column-width設置后會根據元素的總寬度和column-width的值來自動划分列數。number：划分元素以多少列來顯示內容。
兼容性：
查看案例 Demo
column-gap樣式屬性使用
column-gap：用於設置每一列之間的間隔
語法：
column-gap: length | normal;
length：設置列間的間隔為指定的長度。normal：規定列間間隔為一個常規的間隔。W3C 建議的值是 1em。
兼容性：
查看兼容性詳情
查看案例 Demo
column-span樣式屬性使用
column-span：用於設置元素中的子元素橫向跨越的列數
語法：
column-span: 1 | all;
1：設置元素橫跨一列，默認值。all：設置元素橫跨所有列，也就是單獨占一行顯示。
兼容性：
查看兼容性詳情
查看案例 Demo
column-rule樣式屬性使用
column-rule：字面意思是設置多列規則，它是一個簡寫屬性，用於整體設置所有column-rule-*的規則屬性，規定列之間的寬度、樣式和顏色規則，此屬性類似於設置邊框。
語法：
column-rule: width | style | color
-
width：規定列之間的寬度規則，非簡寫：column-rule-width- 取值：
thin | medium | thick | length;thin：很細medium：中等thick：寬厚length：自定義單位值
- 取值：
-
style：規定列之間的樣式規則，非簡寫：column-rule-style- 取值：
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;none：無規則hidden：隱藏dotted：點線效果dashed：虛線效果solid：實線效果double：雙線效果groove：定義3D凹槽效果。該效果取決於寬度和顏色值。ridge：定義3D凸起效果。該效果取決於寬度和顏色值。inset：定義3D內顯示效果。該效果取決於寬度和顏色值。outset：定義3D外顯示效果。該效果取決於寬度和顏色值。
- 取值：
-
color：規定列之間的顏色規則，非簡寫：column-rule-color- 取值：
color顏色值;
- 取值：
兼容性：
查看案例 Demo
column-fill樣式屬性使用
column-fill：規定如何填充列
語法：
column-fill: balance | auto;
balance：對列進行協調。瀏覽器應對列長度的差異進行最小化處理。auto：按順序對列進行填充，列長度會各有不同。
兼容性： 暫時無瀏覽器支持此屬性，這里就不做討論了。