公開日: 2026 年 1 月 14 日
Chrome 145 以降では、マルチカラム レイアウト レベル 2 仕様の column-wrap プロパティと column-height プロパティがサポートされます。これらのプロパティを使用すると、ブロックの方向に列を新しい行に折り返すことができます。
Chrome 145 より前は、マルチカラム コンテナの高さが制限されている場合、使用可能なスペースに収まらないコンテンツはインライン方向にオーバーフロー カラムとして表示されていました。これにより、ウェブに水平スクロールバーが作成されます。
column-height プロパティと column-wrap プロパティを使用すると、列の行の高さを設定し、オーバーフローした列を新しい行として表示するように設定できます。
列の新しい行を作成できることで、現在の状況を回避できます。現在の状況では、ユーザーが列を読むために上下にスクロールするか、コンテンツの量が予測できない場合に水平スクロールバーが表示されるリスクを冒すかのいずれかを選択する必要があります。
また、ブロック方向カルーセルなどのパターンも有効になります。このパターンでは、使用可能なビューポートの高さ全体を埋める列が作成されます。次の行の列を読み取るには、ブロック方向に次の画面までスクロールします。
読みやすいエクスペリエンスを作成する
列が複数行ある場合、読者が複数行あることに気づかず、列のギャップを飛ばして読み進めてしまうような、わかりにくい読書体験になる可能性があります。これは UI 設計で考慮すべき点です。今後、row-gap に装飾を追加できるようになるため、この視覚的な区別を作成するためのツールがさらに増えます。
行ルールは近日リリース予定です
multicol レベル 1 の仕様には、column-rule のスタイル設定のプロパティが含まれています。このルールは、列間のギャップに配置されます。行ルールのスタイル設定のプロパティは、現在デベロッパー トライアル中の新しい CSS Gap Decorations 仕様に含まれています。この機能が安定すると、グリッド、フレックスボックス、マルチカラムで行と列のルールを追加できるようになります。