column-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

column-width は CSS のプロパティで、段組みレイアウトで理想的な段の幅を設定します。コンテナーは column-width の値よりも狭い段がないように、できるだけ多くの段を配置します。コンテナーの幅が指定された値よりも狭い場合、実際の段の幅はより狭くなることがあります。

試してみましょう

このプロパティは様々な画面の大きさに合うレスポンシブデザインを作成するのに役立ちます。特に (優先度の高い) column-count プロパティがある場合、正確な段の幅を設定するには、すべての幅の値を指定する必要があります。横書きでは、これらは width, column-width, column-gap, column-rule-width です。

構文

css
/* キーワード値 */
column-width: auto;

/* <length> 値 */
column-width: 60px;
column-width: 15.5em;
column-width: 3.3vw;

/* グローバル値 */
column-width: inherit;
column-width: initial;
column-width: revert;
column-width: unset;

column-width プロパティは以下に挙げた値のうちの一つで指定します。

値

<length>

段の最適な幅のヒントを与えます。実際の段の幅は指定された値と異なります。空間を埋める必要がある場合は広くなる可能性があり、利用可能な幅が狭すぎる場合は狭くなる可能性があります。この値は正の数だけで、そうでなければ宣言は無効になります。パーセント値も無効です。

auto

段の幅は column-count などの他の CSS プロパティによって決定されます。

公式定義

初期値auto
適用対象表ラッパーボックスを除くブロックコンテナー
継承なし
計算値ゼロ以上の絶対的な長さ
アニメーションの種類length

形式文法

column-width = 
  auto                                |
  <length [0,∞]>                      |
  min-content                         |
  max-content                         |
  fit-content( <length-percentage> )  

<length-percentage> = 
  <length>      |
  <percentage>

例

段の幅をピクセル数で設定

HTML

html
<p class="content-box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
  enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
  nisl ut aliquip ex ea commodo consequat.
</p>

CSS

css
.content-box {
  column-width: 100px;
}

結果

仕様書

Specification
CSS Box Sizing Module Level 3
# column-sizing
CSS Multi-column Layout Module Level 1
# cw

ブラウザーの互換性

BCD tables only load in the browser

関連情報