レイアウト
column-fill
column-fill は、段組みの文章を、段の高さがそろうように分けるか、1 段目から順に埋めるかを指定します。
構文
auto | balance | balance-allプレビュー
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
column-count: 2;
font-size: 12px;
column-fill: auto;
}コントロール
column-fillauto
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
解説
値の書き方
balance：初期値です。文章がそれぞれの段にできるだけ同じ高さで入るように分けます。auto：1 段目を箱の下まで埋めてから、2 段目に続けます。文章が短ければ、後ろの段は空いたままになります。
このページのプレビューは、補助の宣言で見本の文章の箱を column-count: 2 の 2 段にし、文章が 1 段の高さに収まるように font-size: 12px で文字を小さくしています。auto では文章が全部 1 段目に入り、balance では 2 つの段に分かれます。
auto が効くとき
auto で段を順に埋めるのは、height などで箱の高さが決まっているときです。高さが決まっていない箱でのふるまいはブラウザによって違い、Chrome・Edge と Firefox では段の高さに上限が無いので文章が全部 1 段目に入り、Safari では balance と同じように分けられます。
- 文章が箱に入りきらず、段が箱の外に足されるときは、どちらの値でも同じです。
column-span: allで全部の段にまたがる要素があると、その前までの段は、値にかかわらず高さがそろうように分けられます。
このページで扱わない書き方
印刷などでページをまたぐときに、どのページの段もそろえる balance-all という値も仕様にありますが、対応しているブラウザがまだ無いので、このページのコントロールには出していません（balance でそろうのは最後のページだけです）。