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">
    ロンドン。ミカエル学期の終わり、リンカーンズ・イン・ホールに大法官が座っています。容赦のない 11 月の天候。街は、まるで地球から水が引き始めたばかりのように泥だらけで、ホルボーン・ヒルを象のようなトカゲのようによちよち歩く、体長 12 メートルほどのメガロサウルスに出会っても不思議ではないでしょう。
  </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-width> = 
  auto                                |
  <length [0,∞]>                      |
  min-content                         |
  max-content                         |
  fit-content( <length-percentage> )  

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

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

<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