CSS3

：

プロパティ

：

column-width

　編集：2022.07.14 by T.A.

¶段組：column の幅。

名前	`column-width`
値	auto \| <length[0,∞]>
初期値	auto
適用対象	ブロックコンテナ ─ ただし、table 包装ボックスは除く
継承	されない
百分率	受容しない
算出値	キーワード auto／絶対長さ
正準的順序	文法に従う
アニメーション型	算出値の型による

このプロパティは、複 column コンテナにおける column 幅を記述する。

auto

column 幅は、他のプロパティ（例： auto でない値が指定された column-count）から決定されることを意味する。

<DIV style="border:1px solid red; width:200px;
 font-size:10px;
 column-count:3;
 column-width:auto;
">ああああああああああああああああああ</DIV>

<length[0,∞]> ○

最適とされる column 幅を記述する。column 幅の実際の値は、（可用な空間を埋めるために）より幅広にされたり、（可用な空間が指定された column 幅より小さい場合に限り）より狭小にされ得る。負な値は許容されない。使用値は 1px 以上に切り上げられる。

<DIV style="border:1px solid red; width:200px;
 font-size:10px; letter-spacing:0;
 column-count:3;
 column-width:60px;
">あああああああああああああああああああああああああ</DIV>

<DIV style="border:1px solid red; width:200px;
 font-size:10px; letter-spacing:0;
 column-width:60px;
">あああああああああああああああああああああああああ</DIV>

<DIV style="border:1px solid red; width:200px;
 font-size:10px; letter-spacing:0;
 column-width:70px;
">あああああああああああああああああああああああああ</DIV>

column-width:70pxにならずに自動調整された

例えば、次のスタイルシートを考える：

div {
  width: 100px;
  column-width: 45px;
  column-gap: 0;
  column-rule: none;
}

100px 幅にされた要素の内側には、45px 幅の column 2 本分の部屋がある。可用な空間を埋めるため、column 幅の実際の値は、50px まで増大されることになる。【“部屋（room）” ─ レイアウトにおいて排他的に占める空間】

テスト

ここに表示

スクリプト：

スクリプト：

表示内容：