多欄布局是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
這個屬性和table中的span屬性差不多，但是它只有none和all兩個值，并且它前后的內容都得按照分欄布局規則重新排列。
三、淺談應用
掌握基礎結構和用法之后，現在可以對一篇文章進行漂亮的排版了：
看起來的確不錯，但是感覺有那么點怪。
怪在哪里呢？因為你幾乎不會看到展示文章的網站中采用這種方式排版。（為了驗證這一點特地查看了大部分的雜志或者新聞網站）。
其實看到這種多欄布局，我第一時間想到的是古書的排版，那么我們可以采用這種分欄布局實現古書的排版方式：
| .demo { width: 300px; margin: 100px auto; columns: 10; column-rule: 1px dashed rgb(213,213,213); direction: rtl; word-wrap: break-word; text-align: center; } |
在采用多欄布局的方式實現這種效果時需要注意：
每一欄的寬度必須控制在一個字左右，所以這里對于容器的寬度有嚴格的要求； 通過word-wrap: break-word屬性使中文的標點符號換行；那么不用多欄布局是否也能實現上述的排版呢？當然可以！并且我們又要認識一個新的CSS3成員 -- writing-mode：
