レイアウト
column-width
column-width は、段組みの段の幅の目安を指定します。箱に入るだけの数の段ができるので、メディアクエリを書かなくても、箱の幅に合わせて段の数が変わります。
構文
auto | <length [0,∞]>プレビュー
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
column-width: 6em;
}コントロール
column-width6em
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
解説
値の書き方
auto：段の幅を決めません。初期値です（column-countを書いていれば、その数から段の幅が決まります）。- 長さ：段の幅の目安です。% と負の値は使えません。
段の数の決まり方
段の幅がちょうど column-width になるわけではありません。ブラウザは、column-width より狭くならない範囲でできるだけ多くの段を作り、余った幅を段で等分して広げます。箱が column-width より狭いときは、1 段で箱の幅に縮みます。
このページのプレビューは見本の文章の箱に column-width を付けています。箱の右下をドラッグして幅を変えると、段の数が増えたり減ったりします。
column-count と組み合わせる
column-count も書くと、段の数はその数までになります。ショートハンドの columns で columns: 12em 3 のようにまとめて書けます。段の間の空きは column-gap で決め、段の幅の計算にも入ります。