Column breaks

カラムレイアウト内で、特定の要素の前後で列を区切ったり、要素が列をまたいで分割されることを防いだりできます。見出しの直前で新しい列を開始したり、カード要素が途中で切れないようにするなど、レイアウトの品質を向上させます。印刷時のページ区切りにも同じプロパティが使用されます。

マルチカラムブレーク制御

概要

Chrome 102+

Edge 102+

Safari 未対応

Firefox 未対応

Chrome Android 102+

Safari iOS 未対応

Firefox Android 未対応

CSS

.card {
  break-inside: avoid;
}
h2 {
  break-before: column;
  break-after: avoid;
}

カラムレイアウトの分割制御

カード要素や画像ブロックが列の途中で分割されないよう break-inside: avoid を設定し、レイアウトの完全性を保てます。

Chrome/Edgeのみのサポートで、SafariとFirefoxでは未実装です。マルチカラムレイアウトの重要な制御に使う場合はブラウザ対応を確認してください。