CSSでマルチカラムを作るもっとも簡単な方法は、columnsプロパティを使うことである。例えば3列のカラムを作りたいならcolumns:3;とすればよい。

columnsプロパティとは

colmunsプロパティは、column-countとcolumn-widthのショートハンドだ。それぞれカラムの数と幅を指定する。

css
.multi-columns{
  column-width:200px;
  column-count:4;
}
html
<p class="multi-columns">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
</div>

以下はcolumnsプロパティを使った場合。こちらは’s’がつくので注意したい。

css
.multi-columns{
  columns:4 200px;
}
html
<p class="multi-columns">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
</div>

単位のあるなしで区別されるため、columnsに指定するプロパティの順番はどちらが先でも良い。また、幅の単位は、CSSの長さを表現する単位であればどれでも良い。

colmun-countもcolumn-widthも、autoの値を指定できる。この値を指定すると、もう一方の値に基づいて自動で適切な値が使われる。両方ともautoを指定すると、見かけ上は何も起きない。カラムが解除……ように見えるが、何か知らない条件があるのかもしれない。

子要素もカラムに分けられる

columnsプロパティを使うと、一見複雑に見えるマルチカラムも簡単に実現できる。例えば画像を敷き詰めたようなレイアウトなどに重宝する。

css
.multi-columns{
	columns:6 100px;
	height:255px;
}
.multi-columns > div:first-child ~ div {
	margin-top:10px;
}
.square{
	width:100px;
	height:100px;
	background-color:salmon;;
}
.rect1{
	width:100px;
	height:50px;
	background-color:deepskyblue;
}
.rect2{
	width:100px;
	height:75px;
	background-color:gold;;
}
html
<div class="multi-columns">
	<div class="bg square">1</div>
	<div class="bg rect1">2</div>
	<div class="bg rect2">3</div>
	<div class="bg rect1">4</div>
	<div class="bg rect2">5</div>
	<div class="bg square">6</div>
	<div class="bg rect1">7</div>
	<div class="bg square">8</div>
	<div class="bg rect2">9</div>
	<div class="bg rect2">10</div>
	<div class="bg square">11</div>
	<div class="bg rect1">12</div>
	<div class="bg rect2">13</div>
	<div class="bg rect1">14</div>
	<div class="bg square">15</div>
	<div class="bg square">16</div>
	<div class="bg rect2">17</div>
	<div class="bg rect1">18</div>
</div>

マルチカラムに関連するその他のプロパティ

columnsと併せて、マルチカラムを作成する際に使えるプロパティがある。

余白に関連するもの

プロパティ名 値
column-gap 任意の長さ。カラムとカラムの幅。デフォルト値は1em。
column-fill auto;/* 端から埋める。 */
balance;/* コンテンツの高さをできるだけ均等に配置。デフォルト値 */
balance-all;

線に関連するもの。

プロパティ名 値
column-rule-color 任意の色;
column-rule-style none; /* デフォルト値。 */
hidden;
dotted;
dashed;
solid;
double;
groove;/* めり込む線 */
ridge;/* 出っぱる線 */
inset;/* 要素ごとめり込む（ように見える線） */
outset;/* 要素ごと出っぱる（ように見える線） */
column-rule-width thin; /*1px*/
medium;/* 3px。デフォルト値*/
thick;/* 5px */
任意の長さ;
column-rule 上記3つのショートハンド。

子要素に指定するもの。

プロパティ名 値
column-span none; /* デフォルト値 */
all; /* カラムを無視して横いっぱいに広がる */

column-gapが効かない？

カラム間の余白は、column-gapというプロパティで指定する。ただ、column-countの挙動を理解してないと、column-gapが効かないように見えることがある。

column-countは、その要素を指定した要素の幅に収めたいカラム数を指定する。これは、親要素に収めたいカラム数であって、折り返されるカラム数ではない。

例えば幅100、高さ100の親要素の中に、幅50、高さ100の子要素が3つあるとする。この場合にcolumn-count:2;を指定すると、3つのカラムが作られ、最初の1つが親要素に収まる。2つ目はcolumn-gapプロパティのデフォルト分（1em分）、親要素からはみ出る。残ったカラムは完全にはみ出る。

css
.multi-columns{
	background-color:grey;
	border:solid 1px #ddd;
	column-count:2;
	width:100px;
	height:100px;
}
.rect{
	width:50px;
	height:100px;
	opacity:0.8;
}
.rect:nth-child(1){background-color:salmon;}
.rect:nth-child(2){background-color:gold;}
.rect:nth-child(3){background-color:skyblue;}
html
<div class="multi-columns">
	<div class="rect">1</div>
	<div class="rect">2</div>
	<div class="rect">3</div>
</div>
<p>わかりづらいけど透けて見える灰色の部分が親要素の領域。</p>

column系のプロパティは努力目標（できる範囲でがんばりま〜す）であって、指定した通りにムリクリ収めてくれるものではない。要注意だニャー。

参考資料