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.

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

試してみましょう

構成要素のプロパティ

このプロパティは以下の 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

関連情報