便利そう？ CSS3のマルチカラムレイアウト

HTML・CSS

マルチカラムレイアウトとは？

記事やブログ、商品説明などの文章の段組の場合、これまでだとfloatを使用し、並べて。。。などの方法で配置していたのですが、親要素にカラム数・幅を指定するだけで綺麗に並んでくれるマルチカラムレイアウトという仕様があることを知ったので試してみました。

マルチカラムレイアウトのメリット

子要素ごとにマークアップする必要はない
各段の高さは自動で揃う (装飾のための微調整に苦労しない)
親要素にカラム数を指定するだけでfloatを使わず横並びにできる（clearfixやfont-size:0;などの指定がいらない）。
代表的なブラウザで表示可能（Internet Explorerでも、IE10からサポートされています）

マルチカラムレイアウトで使えるプロパティ

column-countプロパティ

column-countは要素のカラム数を指定します。column-count: 2;と指定すると2カラムになります。

値
auto	カラム幅は他のプロパティの指定で決定します。（初期値）
数値	指定した数の分だけのカラムに分割できます。

column-widthプロパティ

column-widthプロパティ指定の値は絶対的ではなく、目安になるものです。正確な列幅を指定するためには、すべての長さが指定されている必要があります。（ width、column-width、column-gap、column-rule-width）
レスポンシブデザインの際にwidthを指定すると、指定された幅を確保できなくなった時点でcolumn-countが無効になってしまいます。

値
auto	カラム幅は他のプロパティの指定で決定します。全体の幅やカラム幅などが指定されれば、自ずとカラム数も算出されます。（初期値）
数値	指定した数値の幅のカラムが出力されます。

column-gapプロパティ

column-gapプロパティは多段要素として表示されるよう指定されたブロック要素の段組みの間隔を指定します。
余白はカラムとカラムの真ん中からではなく、分けられたカラムの右端から、その右隣にあるカラムの、左端との間隔となります。

値
normal	ユーザーエージェントに依存するが、1emが提案されています。（初期値）
数値	指定した数値分、カラム間の余白が空きます。

column-ruleプロパティ

column-ruleプロパティはカラムの区切り線のスタイル・幅・色を指定します。
基本的にはboderプロパティと指定の仕方は同じ。

値
column-rule-styleの値	カラムの区切り線のスタイル(初期値：線なし)
column-rule-widthの値	カラムの区切り線の幅（初期値：中くらいの区切り線）
column-rule-colorの値	カラムの区切り線の色（初期値：ユーザーエージェントに依存）

サンプル

column-countとcolumn-widthが同時に指定されている場合はcolumn-widthがmin-widthのように扱われます。column-gapは30pxに指定されているので、この場合は(300px × 2) + 30px = 630pxとなり、ウィンドウサイズが630px以上になると2カラムに変わります。

css

.column {
  column-count: 2; /* ２カラムの場合 */
  column-width: 300px; /* カラムの幅を指定 */
  column-gap: 30px; /* カラム間の余白を指定 */
}

* { box-sizing: border-box; }
body { margin: 0; }

HTML

<div class="column">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Voluptas, officiis nisi doloribus in rem inventore omnis, minus, minima aperiam 
distinctio alias quidem. Amet delectus accusamus, nulla accusantium fugiat 
dolorum voluptas?Minima nam id autem similique sequi necessitatibus dolor, 
rem! Placeat vero, corrupti tenetur voluptatem unde, totam dicta. Sunt vitae 
quas officia earum amet eveniet. Laborum eveniet quam, iusto velit quisquam.
Sit architecto consequatur eligendi provident natus maxime aut reprehenderit 
iure dolore aperiam quam assumenda quidem, sed tempora quaerat, quo culpa dolorum,
 explicabo suscipit deleniti ipsam ea. Odit voluptate, in harum!</div>

デモ

See the Pen GZaXpp by yoshii (@yryr) on CodePen.