CSS3 マルチカラムレイアウト

CSS3ではMulti-column Layoutモジュールが導入され、column-で始まるカラム関連のプロパティが複数追加されました。

columns,column-width,column-countプロパティ

columnプロパティはカラム幅とカラム数を指定するプロパティです。
column-widthとcolumn-countでカラムの幅と数を個別に指定できます。
次の例ではwidthが400pxのdivに収まる(auto)3つのカラムを作っています。
どうやら今のところベンダープレフィックスを付けないと適用されないようです。

<style>
div.column {
  width: 400px;
  -moz-columns: auto 3;
  -webkit-columns: auto 3;
  -ms-columns: auto 3;
}
</style>

<div class="column">
  <p>長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文
  長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文
  長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文
  長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文</p>
</div>

表示例

長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文

column-gapプロパティ

column-gapプロパティはカラムの幅を指定するプロパティです。初期値は1emが提案されています。

<style>
div.column {
  width: 400px;
  -moz-columns: auto 3;
  -webkit-columns: auto 3;
  -ms-columns: auto 3;

  -moz-column-gap: 5em;
  -webkit-column-gap: 5em;
  -ms-column-gap: 5em;
}
</style>

<div class="column">
  <p>長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文
  長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文
  長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文
  長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文</p>
</div>

表示例

長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文

column-rule-*プロパティ

column-rule-*プロパティはカラムの区切りについて指定するプロパティです。
以下のスタイルではカラムのスペースに1px solid #666のボーダーが引かれます。

div.column {
  -moz-column-rule-style: solid;
  -moz-column-rule-width: 1px;
  -moz-column-rule-color: #666;
}

表示例

長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文