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

column-span

マルチカラムレイアウト内の特定の要素（見出しや広告バナーなど）をすべての列にまたがって表示できます。column-span: all を設定すると、その要素はカラムの流れを中断してフル幅で表示されます。新聞記事のセクション見出しのように、コンテンツの区切りを視覚的に明確にする際に活用されます。

マルチカラムスパン

概要

マルチカラムレイアウト内の特定の要素（見出しや広告バナーなど）をすべての列にまたがって表示できます。column-span: all を設定すると、その要素はカラムの流れを中断してフル幅で表示されます。新聞記事のセクション見出しのように、コンテンツの区切りを視覚的に明確にする際に活用されます。

対応ブラウザ

デスクトップ

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

モバイル

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

基本構文

CSS 
.article {
  columns: 3;
}
.article h2 {
  column-span: all;
  text-align: center;
}

実務での使いどころ

  • 新聞風レイアウトのセクション見出し

    マルチカラムの記事内で見出しをすべての列にまたがらせ、セクションの区切りを明確にできます。

注意点

  • column-span は all と none の2値のみで、特定の列数にまたがる設定はできません。また、フレックスボックスやグリッドレイアウトでは使用できません。

アクセシビリティ

  • column-span は視覚的な表示のみを変更し、DOMの順序や読み上げ順序には影響しません。

参考リンク