columns

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.

columnsCSS 一括指定プロパティで、要素の内容物を描画する際に使用する段数や段の幅を設定します。

試してみましょう

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

css
/* 段の幅 */
columns: 18em;

/* 段数 */
columns: auto;
columns: 2;

/* 段の幅と段数の両方 */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;

/* グローバル値 */
columns: inherit;
columns: initial;
columns: revert;
columns: unset;

columns プロパティは以下に挙げる値を 1 つまたは 2 つで、順不同で指定します。

<'column-width'>

理想的な段の幅であり、 <length> または auto キーワードで定義されます。実際の段の幅は、実際の空間に合わせて広くなったり狭くなったりします。 column-width を参照してください。

<'column-count'>

要素の内容物が流れる理想的な段の数であり、 <integer> または auto キーワードで定義します。この値と段の幅の両方が auto でない場合は、最大の段数を示します。 column-count を参照してください。

公式定義

初期値一括指定の次の各プロパティとして
適用対象表ラッパーボックスを除くブロックコンテナー
継承なし
計算値一括指定の次の各プロパティとして
アニメーションの種類一括指定の次の各プロパティとして

形式文法

columns = 
<'column-width'> ||
<'column-count'>

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

<column-count> =
auto |
<integer [1,∞]>

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

3 つの等しい段の設定

HTML

html
<p class="content-box">
  This is a bunch of text split into three columns using the CSS `columns`
  property. The text is equally distributed over the columns.
</p>

CSS

css
.content-box {
  columns: 3 auto;
}

結果

仕様書

Specification
CSS Multi-column Layout Module Level 1
# columns

ブラウザーの互換性

BCD tables only load in the browser

関連情報