CSS3 columns プロパティを試します

CSS Multi-column Layout Module W3C Candidate Recommendation 12 April 2011 という勧告候補の仕様が策定されています。CSS3 マルチカラムレイアウトは、段組みと訳されます。段組みといったほうが利用イメージと合致しやすいように感じます。

columns プロパティは column-width と column-count の両方のプロパティをまとめて設定できるショートハンドプロパティです。columns column-width 値（カラム幅） column-count 値（カラム数）という構文です。初期値は columns auto auto です。column-width 値（カラム幅）が auto 以外で column-count 値（カラム数）を設定した時、設定したカラム数は最大値と判断されます。

[css]
.multiColumns {
-moz-columns : 135px auto ;
-webkit-columns : 135px auto ;
columns : 135px auto ;
-moz-column-gap : 0.5em ;
-webkit-column-gap : 0.5em ;
column-gap : 0.5em ;
-moz-column-rule: 1px solid #cccccc ;
-webkit-column-rule : 1px solid #cccccc ;
column-rule : 1px solid #cccccc ;
}
[/css]
[html]
<div class="multiColumns">
<h4>column-width</h4>
<p>column-width プロパティは、マルチカラムのカラム幅を指定します。auto を指定した時は、他のプロパティの設定によりカラム幅が決定されます。</p>
<h4>column-count</h4>
<p>column-count プロパティは、マルチカラムのカラム数を指定します。auto を指定した時は、他のプロパティの設定によりカラム数が決定されます。</p>
<h4>column-gap</h4>
<p>column-gap プロパティは、カラム間の幅を指定します。</p>
<h4>column-rule</h4>
<p>column-rule プロパティは、カラム間の区切り線の幅、スタイル、カラーを指定します。</p>
</div>
[/html]

  

column-width
 
column-width
プロパティは、マルチカラムのカラム幅を指定します。auto を指定した時は、他のプロパティの設定によりカラム幅が決定されます。
column-count
 
column-count
プロパティは、マルチカラムのカラム数を指定します。auto を指定した時は、他のプロパティの設定によりカラム数が決定されます。
column-gap
 
column-gap
プロパティは、カラム間の幅を指定します。
 
column-rule
column-rule プロパティは、カラム間の区切り線の幅、スタイル、カラーを指定します。