多欄佈局是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：
.demo {
width: 180px;
margin: 50px auto;
height: 170px;
line-height: 30px;
font-size: 16px;
letter-spacing: 1px;
writing-mode:vertical-rl;
background: repeating-linear-gradient(to left, #000, #000 3%, #FFF 3%, #FFF);
background-size: 30px 100%;
}
複製程式碼
這裡唯一值得詬病的就是分欄的樣式不能像分欄佈局中的column-rule那樣靈活的變動。
CSS總是給人很神奇的感覺，接下來我們用多欄佈局實現九宮格佈局：
它最大的缺點已經通過圖中的數字展示的清清楚楚，實際上在實現這樣的佈局時，特別需要注意的就是子元素垂直方向margin造成的影響，這個就留給讀者自己去實踐吧。
四、總結
作為CSS3中新增的佈局方式，相比較並沒有flex那麼引人注目，主要由於它解決的痛點相對比較的偏，但是從上述實現的九宮格佈局不難看出它還是能搞點事情的。