column-fill

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.

column-fillCSS のプロパティで、段組みレイアウトで要素のコンテンツが複数の段に分割されるとき、どのようにバランスを取るのかを制御します。

試してみましょう

構文

css
/* キーワード値 */
column-fill: auto;
column-fill: balance;

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

column-fill プロパティは、以下に挙げたキーワード値のうちの 1 つで指定します。初期値は balance で、コンテンツは段の間で均等になります。

auto

段は順に埋められます。コンテンツは必要な余地があるときだけ分割されるので、一部の段は空になることがあります。

balance

コンテンツは各段に均等に分割されます。ページ付きメディアなどの断片化されたコンテキストでは、最後の断片のみが均等に分割されます。従ってページ付きメディアでは、最後のページのみが均等に分割されます。

仕様書では balance-all の値を定義しており、この値ではページ付きメディアなどの断片化されたコンテキストにおいて、段の間で均等に分割します。この値は、まだどのブラウザーでも対応していません。

公式定義

初期値balance
適用対象段組み要素
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

column-fill = 
auto |
balance |
balance-all

段の内容を均等にする

HTML

html
<p class="fill-auto">
  この段落では、段を 1 つずつ埋めていきます。すべてのテキストが最初の段に収まるので、他の段は空白になります。
</p>

<p class="fill-balance">
  この段落では、それぞれの段でコンテンツの量のバランスを取ろうとします。
</p>

CSS

css
p {
  height: 7em;
  background: #ff9;
  columns: 3;
  column-rule: 1px solid;
}

p.fill-auto {
  column-fill: auto;
}

p.fill-balance {
  column-fill: balance;
}

結果

仕様書

Specification
CSS Multi-column Layout Module Level 1
# cf

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
column-fill
auto
balance

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

警告: 仕様上の未解決の問題により、 column-fill にはブラウザ-間の相互運用性の問題やバグがあることに注意してください。

特に、 column-fill: auto を使用して連続的に段を埋める場合、 Chrome では、段組みコンテナーにブロック方向の寸法(例: 横書きモードならば高さ)がある場合にのみこの値を参照します。 Firefox は常にこのプロパティを参照するため、寸法がない場合は最初の段をすべてのコンテンツで埋めます。

関連情報