column-widthプロパティ

段組の列幅を指定するプロパティです。

column-widthプロパティに指定できる値

column-widthプロパティは以下の形式で値を指定します。

値	内容
`auto`	初期値。列幅を自動的に決める。
数値 + 任意の単位	`1`以上の数値と、「`px`」や「`em`」といった単位で列幅を指定。

以降はcolumn-widthプロパティを使用したコード例とブラウザの表示例を紹介していきます。

列幅に「5em」を指定している例です。

.element1 {
  column-width: 5em;
}

<p class="element1">ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。アジア系の観光客も多く、浴衣を着て川越街道を歩くことは素晴らしいコンテンツになっているようです。</p>

column-countプロパティと併用した例です。
column-countプロパティの値「2」が列数の最大値となるため、column-widthプロパティで指定した値よりも優先された表示結果となります。

.element2 {
  column-count: 2;
  column-width: 5em;
}

<p class="element2">ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。アジア系の観光客も多く、浴衣を着て川越街道を歩くことは素晴らしいコンテンツになっているようです。</p>