columns

値の書き方

• 長さ：column-width（段の幅の目安）になります。% と負の値は使えません。
• 1 以上の整数：column-count（段の数）になります。
• auto：書いた場所に応じて、どちらかが auto になります。columns: auto は両方が auto で、段組みになりません。

長さと整数はどちらを先に書いても構いません。片方だけ書くと、もう片方は初期値の auto になります。columns: 2 は column-width: auto と column-count: 2 です。

両方を書いたとき

column-width より狭くならない範囲で段を増やし、column-count の数を上限にします。広い箱では column-count の数まで段ができ、狭い箱では段が減り、column-width より狭い箱では 1 段になります。このページのプレビューは見本の文章の箱に columns を付けています。箱の右下をドラッグして幅を変えると、段の数が変わります。

/ のあとの段の高さ

CSS Multi-column Layout Module Level 2 では、columns: 12em / 8em のように / のあとに column-height（段の高さ）を書けます。段の高さに入りきらない文章は、段を横に足す代わりに、下に新しい段の行を作って続きます（column-wrap の初期値 auto は、段の高さを決めたときにこのふるまいになります）。

column-height は Chrome・Edge 145 から使えます。Firefox と Safari では / を含む宣言が丸ごと無視されるので、段組みにもなりません。

気をつけること

• columns を書くと、書いていないほうも auto に戻ります。先に書いた column-count を残したいときは、columns で両方を書くか、columns のあとに column-count を書きます。column-height に対応したブラウザでは、column-height と column-wrap も初期値に戻ります。
• 段の間の空き（column-gap）と線（column-rule）は columns には入りません。別に書きます。