Widely available YES。全ブラウザで長期サポート済み。段組みレイアウトに最適。
レイアウト Widely available

Multi-column layout

長いテキストコンテンツを読みやすくするために、新聞や雑誌のような段組みレイアウトを CSS のみで実現する。column-count で段数を指定するか、column-width で最小列幅を指定して自動段組みを行える。テキスト以外のリストやカード要素の分割にも利用可能。

レイアウトテキスト

概要

長いテキストコンテンツを読みやすくするために、新聞や雑誌のような段組みレイアウトを CSS のみで実現する。column-count で段数を指定するか、column-width で最小列幅を指定して自動段組みを行える。テキスト以外のリストやカード要素の分割にも利用可能。

対応ブラウザ

デスクトップ

Chrome 50+
Edge 12+
Safari 9+
Firefox 52+

モバイル

Chrome Android 50+
Safari iOS 9+
Firefox Android 52+

基本構文

CSS 
.article-body {
  column-count: 3;
  column-gap: 2rem;
  column-rule: 1px solid #ddd;
}

/* 幅ベースの自動段組み */
.list-columns {
  column-width: 200px;
  column-gap: 1.5rem;
}

実務での使いどころ

  • 記事の段組みレイアウト

    長文の記事を複数カラムに分割し、新聞のような読みやすいレイアウトを実現する。

  • リストの分割表示

    長いリスト（用語集やナビゲーション一覧）を複数カラムに分割して縦方向のスペースを節約する。

注意点

  • カラム途中での要素の分断を防ぐには break-inside: avoid を指定する必要がある。
  • 画像やテーブルなどの固定幅要素がカラム幅を超えるとレイアウトが崩れる場合がある。

アクセシビリティ

  • 段組みはテキストの流れが左上から右下に続くため、読み上げ順序は DOM 順のままで問題ない。ただし段が細すぎると可読性が低下する。

参考リンク