Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

column-fill

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

マルチカラムコンテンツ分配

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
column-fill
50
12
52
9
50
9
auto
50
12
17
8
50
8
balance
50
12
17
8
50
8
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (74)
対応条件
  • ベンダープレフィックス付きで対応: -moz- (17)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (8)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (8)

基本構文

CSS 
.balanced-columns {
  columns: 3;
  column-fill: balance;
}
.sequential-columns {
  columns: 3;
  column-fill: auto;
  height: 300px;
}

ライブデモ

Balance(equal)

CSS Balance(equal) demo.

プレビュー全画面表示

Auto(sequential)

CSS Auto(sequential) demo.

プレビュー全画面表示

Comparison view

CSS comparison view demo.

プレビュー全画面表示

実務での使いどころ

  • カラムの高さの均等化

    column-fill: balance を使用して、マルチカラムレイアウトの各列を均等な高さに分配し、整った見た目を実現できます。

注意点

  • column-fill: auto を使用するには、要素に明示的な高さ（height）を設定する必要があります。高さがない場合、balance と同じ動作になります。

アクセシビリティ

  • マルチカラムレイアウトでは、スクリーンリーダーはDOMの順序でコンテンツを読み上げます。視覚的なカラム配置と読み上げ順序が一致していることを確認してください。

参考リンク