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 一括指定プロパティで、要素の内容物を描画する際に使用する段数や段の幅を設定します。

試してみましょう

columns: 2;

columns: 6rem auto;

columns: 12em;

columns: 3;

<section id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

#example-element {
  min-width: 21rem;
  text-align: left;
}

構成要素のプロパティ

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

構文

css

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

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

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

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

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

値

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

公式定義

初期値	一括指定の次の各プロパティとして `column-width`: `auto` `column-count`: `auto`
適用対象	表ラッパーボックスを除くブロックコンテナー
継承	なし
計算値	一括指定の次の各プロパティとして `column-width`: ゼロ以上の絶対的な長さ `column-count`: 指定通り
アニメーションの種類	一括指定の次の各プロパティとして `column-width`: length `column-count`: integer

形式文法

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

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

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

<column-height> = 
  auto            |
  <length [0,∞]>  

<column-wrap> = 
  nowrap  |
  wrap    

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

例

3 つの等しい段の設定

HTML

html

<p class="content-box">
  これは、 CSS の `columns` プロパティを使用して 3 つの列に分割されたテキストの束です。テキストは各カラムに均等に配置されている。
</p>

CSS

css

.content-box {
  columns: 3 auto;
}

結果

仕様書

Specification
CSS Multi-column Layout Module Level 1 # columns