レイアウト
column-count
column-count は、箱の中の文章を何段に分けて流すか（段組み）を指定します。新聞や雑誌のように、1 段目の下まで来たら 2 段目の上に続きます。
構文
auto | <integer [1,∞]>プレビュー
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
column-count: 2;
}コントロール
column-count2
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
解説
値の書き方
auto：段に分けません。初期値です（column-widthを書いていれば、その幅から段の数が決まります）。- 1 以上の整数：その数の段に分けます。段の幅は、箱の幅を等分した幅になります。
段の高さと間
箱の高さが決まっていないときは、文章がそれぞれの段にできるだけ同じ高さで入るように分けられます（column-fill: balance）。高さが決まっていて段に入りきらないときは、指定した数より多い段が箱の外（横書きなら右）に足されます。
段と段の間は column-gap（初期値の normal は 1em）、段の間の線は column-rule で決めます。
このページのプレビューは見本の文章の箱に column-count を付けています。箱の右下をドラッグして幅を変えても、段の数は変わらず、段の幅が変わります。
column-width と組み合わせる
column-width と両方を書くと、column-count は段の数の上限になります。広い画面では column-count の数まで、狭い画面では column-width より狭くならない数まで段が減ります。ショートハンドの columns で columns: 12em 3 のようにまとめて書けます。
段をまたぐ要素と途中で切らない要素
見出しなどを全部の段にまたがらせるには、その要素に column-span: all を書きます。画像や囲みが段の途中で 2 つに分かれないようにするには、その要素に break-inside: avoid を書きます。