CSSで左上から下に向かって配置するカラムレイアウトを作れる「columns」プロパティ

column-count

前項でほとんど紹介してしまいましたが､column-countはカラム数を指定するプロパティです｡

こうすると

ul.columns {
	column-count: 5;
}

5カラムで配置されます｡

このようにすればレスポンシブにも対応できます｡

ul.columns {
	column-count: 5;
}
@media screen and (max-width: 767px) {
	ul.css_columns {
		column-count: 2; /* スマホでは2カラム */
	}
}

column-rule

column-ruleはカラムの区切り線の幅(column-rule-width)・スタイル(column-rule-style)・色(column-rule-color)をまとめて指定できるプロパティです｡

書き方は「border」プロパティと一緒で このように書くと

ul.columns {
	columns: 3;
	column-rule: 2px solid #333;
}

このように線で区切られます｡

column-fill

「使うことは無いかな～」というプロパティです｡

column-fillは､子要素をどのようなバランスで配置するか指定するプロパティで「auto」「balance」「balance-all」の3つの値を指定することができます｡ 初期値は「balance」です｡

「auto」を指定すると､子要素を左に詰めることが優先されます｡

ul.columns {
	columns: 3;
	column-fill: auto;
}

すべての子要素が左のカラムに入ってしまいます｡

「balance-all」は調べてもよくわかりませんでした｡

column-span

column-spanは､特定の子要素を複数のカラムにまたがって配置できるプロパティで「none」「all」の2つの値があります｡ 初期値は「none」です｡

例えばこういうHTMLで

<ul class="columns">
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
	<li>リスト4</li>
	<li class="column-span">リスト5</li>
	<li>リスト6</li>
	<li>リスト7</li>
	<li>リスト8</li>
</ul>

CSSをこうすると

ul.columns {
	columns: 3;
}
ul.columns .column-span {
	column-span: all;
}

このように「リスト5」が横いっぱいにまたがって配置されました｡

使い所が難しそうですね､ ここまでやるならGridを使ったほうがいい気もします｡