CSS3の Multi-column Layout Module を使ってみる

CSS3にはMulti-column Layout Moduleというものがあります。
http://www.w3.org/TR/css3-multicol/

私は従来のHTMLは遊び程度に少し触っていた程度の経験しかないのですが、CSSのfloat機能を使うかtableなんかを使ってmulti-columnを実現することが多かったのではないでしょうか。

その場合大変なのは、コンテンツを各columnにどう振り分けるか、という処理。
動的に生成されるテキストだったりすると、はじめからテキストを振り分けることもできず、なかなか美しいレイアウトを作るのは難しかったんではないでしょうか。

CSS3で提供されるMulti-column Layout Moduleを使えば、コンテンツの各columnへの割り当てはレンダリング時に自動でやってもらえます。
細かい使用等の説明は他のサイト等に譲るとして（私用の忘備録なので）、例えば次のようなcolumnクラスを定義し、divタグなどでこのクラスを指定してあげると、画像のサイズを変えてもちゃんとmulti-columnのレイアウトになってくれます。

.column {
    column-width: 30em;
    -webkit-column-width: 30em;
    -moz-column-width: 30em;
    column-gap: 5em;
    -webkit-column-gap: 5em;
    -moz-column-gap: 5em
}

ちなみに-moz-*はFireFoxで表示させるのに、-webkit-*はGoogle ChromeやSafariで表示させるのに必要みたいです。