【61】各カラムの埋め方を決める column-fillプロパティ

マルチカラムに関するプロパティの続きです。
column-fillプロパティは、マルチカラムで各カラムの内容の埋め方（カラム内の行数）をどうするか決めます。

本日のINDEX

1. column-fillプロパティの値
2. column-fillプロパティを使ってみる

マルチカラム関連のプロパティは、下記のように記事を分けています。

【57-1】マルチカラムのカラム数を決める column-countプロパティ

【57-2】マルチカラムのカラム幅を決める column-widthプロパティ

【57-3】カラム数と幅をまとめて指定する columnsショートハンド

【58】各カラムの間隔を指定する column-gapプロパティ

【59-1】カラム間の罫線のスタイルを指定する column-rule-style

【59-2】カラム間の罫線の幅を指定する column-rule-width

【59-3】カラム間の罫線の色を指定する column-rule-colorプロパティ

【59-4】カラム間の罫線をまとめて指定する column-rule

【60】マルチカラム内で段抜きができる column-spanプロパティ

【61】各カラムの埋め方を決める column-fillプロパティ　←今日はココ

（ちょっとメモ）ブラウザはどうやって カラムの幅を決めるか

参考：
・CSS Multi-column Layout Module Level 1 | W3C Working Draft
・CSS 段組みレイアウト | MDN

column-fillプロパティの値

column-fillプロパティの値は以下のものがあります。

column-fillプロパティ
キーワード	balance がデフォルト値。 balance-all、auto
グローバル値	inherit; 親のcolumnsの値を継承 initial; 継承した親の columnsの値を解消しデフォルト値に戻す unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	しない	適用できる要素	マルチカラムのコンテナ （column-count, column-width, columns を指定した要素）

column-fillプロパティそのものは、主要ブラウザ（IE11も）で実装しています。
ただし、値の balance-all だけは、どのブラウザも未実装です。（参考：Can I Use 2020年10月時点）

それぞれの値は、以下の意味があります。

auto

先頭のカラムから順番にコンテンツを埋めていきます。

balance

これがデフォルト。
コンテンツを各カラムにできるだけ均等に（同じ行数になるように）分割します。

balance-all

この値は今のところ全ブラウザ未実装（参考：Can I Use 2020年10月時点）なので、どんな具合になるのか私はいまのところ実感できていません。
W3C仕様書では「コンテンツは各カラムにできるだけ均等に分割され、断片化コンテキストではすべての断片を平準化する」とあります。（balanceだと最後の断片のみ平準化するそうです）
MDNの解説では「ページメディアでは全ページが均等に分割される」とあります。

CSSの断片化（Fragmentation）とは、コンテンツがページ、領域、段などをまたがって分割された（断片化した）状態のこと。
段落（<p>要素とか）などが、マルチカラムで複数のカラムに分割されたり、印刷時に複数のページに分割されたりする場合を言うそうです。
この状況での表示の制御は、Fragmentation Module で定義されています。

column-fillプロパティを使ってみる

全部の値を使って違いを確認してみます。
（ただし balance-allは全ブラウザ未実装です（2020年10月時点）

無指定（column-fill: balance）

column-fillプロパティのデフォルト値の balance は均等に各カラムに内容を流し込みます。auto は先頭のカラムから順に流し込むので、マルチカラムコンテナの高さを決めていないと最初のカラムに流し込み続けます。

column-fill: balance-all

column-fillプロパティのデフォルト値の balance は均等に各カラムに内容を流し込みます。auto は先頭のカラムから順に流し込むので、マルチカラムコンテナの高さを決めていないと最初のカラムに流し込み続けます。

column-fill: auto

column-fillプロパティのデフォルト値の balance は均等に各カラムに内容を流し込みます。auto は先頭のカラムから順に流し込むので、マルチカラムコンテナの高さを決めていないと最初のカラムに流し込み続けます。

column-fill: auto は 先頭から順にコンテンツを埋めるので、マルチカラムの指定をした要素に「高さ」指定がなければ最初のカラムに延々とコンテンツを流し込みます。
「高さ」を指定すれば、最初のカラムがいっぱいになれば次のカラムに流し込みます。

column-fill: auto で高さを12em にしたもの

column-fillプロパティのデフォルト値の balance は均等に各カラムに内容を流し込みます。auto は先頭のカラムから順に流し込むので、マルチカラムコンテナの高さを決めていないと最初のカラムに流し込み続けます。

HTMLはこちらです。
column-fillプロパティは <div>要素に直接インラインで指定しています。
4番目の<div>要素の高さ指定（height:12em）もインラインでの指定です。

<div class="sample">
  <h4>無指定（column-fill: balance）</h4>
  <p>column-fillプロパティのデフォルト値の balance は均等に各カラムに内容を流し込みます。
auto は先頭のカラムから順に流し込むので、マルチカラムコンテナの高さを決めていないと最初のカラムに流し込み続けます。</p>
</div>
<div class="sample" style="column-fill:balance-all">
  <h4>column-fill: balance-all</h4>
  <p>（略）</p>
</div>
<div class="sample" style="column-fill:auto">
  <h4>column-fill: auto</h4>
  <p>（略）</p>
</div>
<div class="sample" style="column-fill:auto; height:12em">
  <h4>column-fill: auto で高さを12em にしたもの</h4>
  <p>（略）</p>
</div>

CSSはこちら。（マルチカラム関連の指定はハイライトしています）

.sample {
	column-count:3;
	column-gap:2em;
	column-rule:#89c4ff dotted;
	text-align:justify;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:1em}
.sample p {
	line-height:1.4em;
	margin:0}
.sample h4 {
	font-size:1rem;
	margin:0 0 .5em 0;
	background:#c5c56a;
	padding:.5em .8em .4em;
	line-height:1.2em;
	border-radius:1.2em;
	column-span: all}

次回予告

次回はちょっとメモで、マルチカラムの「カラム幅」や「カラム数」を決める計算式を紹介します。これは別に知らなくてもいいことなのでメモと言うより余談ですw