column-fill
マルチカラムレイアウトにおいて、コンテンツを各列に均等に分配するか（balance）、順番に埋めていくか（auto）を制御します。balance はすべての列がほぼ同じ高さになるよう調整し、auto は最初の列から順にコンテンツを埋めていきます。新聞風のレイアウトやリスト表示の見た目を最適化するのに役立ちます。
概要
マルチカラムレイアウトにおいて、コンテンツを各列に均等に分配するか（balance）、順番に埋めていくか（auto）を制御します。balance はすべての列がほぼ同じ高さになるよう調整し、auto は最初の列から順にコンテンツを埋めていきます。新聞風のレイアウトやリスト表示の見た目を最適化するのに役立ちます。
対応ブラウザ
デスクトップ
Chrome 50+
Edge 12+
Safari 9+
Firefox 52+
モバイル
Chrome Android 50+
Safari iOS 9+
Firefox Android 52+
基本構文
CSS
.balanced-columns {
columns: 3;
column-fill: balance;
}
.sequential-columns {
columns: 3;
column-fill: auto;
height: 300px;
}実務での使いどころ
-
カラムの高さの均等化
column-fill: balance を使用して、マルチカラムレイアウトの各列を均等な高さに分配し、整った見た目を実現できます。
注意点
- column-fill: auto を使用するには、要素に明示的な高さ（height）を設定する必要があります。高さがない場合、balance と同じ動作になります。
アクセシビリティ
- マルチカラムレイアウトでは、スクリーンリーダーはDOMの順序でコンテンツを読み上げます。視覚的なカラム配置と読み上げ順序が一致していることを確認してください。