CSS3の新プロパティ「columns」

名前の通りカラム分けを行ってくれるCSSプロパティです。
ベンダープレフィックス付きで下記のように記述します。

.columnBox {
  -webkit-columns: 100px 3;
  -moz-columns: 100px 3;
  -ms-columns: 100px 3;
  -o-columns: 100px 3;
  columns: 100px 3;
  //columns: 1カラム当りの最小幅 カラム数
}

HTMLは下記のようにして使います。
columns を指定した箱自体ではなく、中の要素を自動的にカラム分けしてくれます。

<div class="columnBox">
  <p>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</p>
  <p>かきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこ</p>
  <p>さしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそ</p>
  <p>たちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてと</p>
  <p>なにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねの</p>
</div>

上記の例を実際にブラウザに表示すると下記のようになります。
※IEは10から対応しています。

このプロパティもCompassでベンダープレフィックス無しで楽に書けます。

.columnBox {
    @include columns(100px 3);
}

文章の段組が楽になるプロパティですね。