常用於佈局的大概有浮動float、行內塊inline-block、定位position幾種方式，但這幾種佈局多少有些不足之處，例如排版報紙或雜誌類的多列布局，無法根據內容變化動態地改變佈局。
1.多列布局屬性簡介：
- columns:(包含了column-width和column-count兩個屬性)
- column-gap：定義列間距；
- column-rule：定義列邊框；
- column-span：定義多列布局中的子元素跨列效果；
- column-fill：控制每列的列高效果，以內容多的列高爲準。
2.列寬屬性:column-width
column-width:auto|<length>;//相當於給列定義一個最小寬度(min-width)注意：
- 列寬column-width設置爲auto時，需要配合多列的其他屬性纔能有分列效果。
- 列寬column-width可以配合其他多列布局屬性使用，比如設置列數、列間距等，也可以單獨使用：當容器超出列寬時，會以多列顯示；反之容器小於設置的列寬時，容器將顯示爲一列。
瀏覽器根據列寬和列間距計算列數：
（容器寬度-列與列間距）/列寬=列數
(40em-2em)/10em=38em/10em=3.8 //然後瀏覽器去餘取整，取爲3列當內容撐破容器時，列數-1顯示，由瀏覽器自動計算。
3.列數屬性：column-count
指定列數和允許的最大列數！
column-count:auto|<integer>注意：在前面公式計算出列數爲3列之後，如果顯示設置column-count爲4列，顯示效果卻還是瀏覽器計算出來的列數，爲3列，而不是4列顯示！
4.列間距屬性：column-gap
相當於兩列之間的空白間隔，只存在於相鄰兩列之間！
column-gap:normal|<length>;5.列邊框樣式屬性:column-rule
column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>;注意：
- column-rule-width增大不會影響列布局，不佔任何空間位置；
- column-rule在Z軸上介於background和content之間。column-rule-width寬度增加到列間距大小甚至超過時，列邊框也不會消失。
6.跨列屬性：column-span
用來定義一個分列元素中的子元素能跨列多少。多用於標題等進行跨列居中顯示效果。
column-span:none|all;//用於子元素7.列高度屬性:column-fill
最後列往往沒有足夠的內容進行填充，無法達到讓所有列都具有相同的高度效果，column-fill可以統一高度。
column-fill:auto|balance;
//balance會根據內容最多的一列的高度進行統一總結：
要達到類似於報紙或雜誌的排版效果，無需增加無用的標籤或依賴於浮動或定位來實現佈局效果。熟悉使用列寬column-width、列數column-count、列間距column-gap、列邊框column-rule、跨列column-span和列高度column-fill等六大屬性進行排版佈局，解決此等排版難題。