column-width

概要

CSS の column-width プロパティは、最適な列幅を提案するものです。この値は絶対的ではなく、目安になるものです。ブラウザは、画面サイズに応じた拡縮可能なデザインをかなえるために、提案された値の周辺で列の幅を調整します。特に、優先度の高い column-count プロパティが存在するときは、正確な列幅を設定するために、すべての長さが指定されている必要があります。すべての長さとは、横方向のテキストでは width、column-width、column-gap、column-rule-width です。

構文

形式文法: <length> | auto

column-width: auto
column-width: 6px     /* 様々な <length> 値 */
column-width: 25em
column-width: 0.3vw

column-width: inherit

値

<length>

列の最適な幅の目安になる <length> 値です。実際の列の幅はそれより広くなるか（利用可能なスペースを埋めるため）、狭くなるか（指定した列幅よりも利用可能なスペースが小さいとき）します。この長さは厳密には正の値でなければならず、そうでなければ宣言は無効になります。</length>

auto

column-count のような、他の CSS プロパティによって列の幅が決められることを示すキーワードです。

例

.content-box {
  border: 10px solid #000000;
  column-width: 300px;
}

仕様

ブラウザ実装状況