CSS 段組みレイアウト

以下の例では、 column-count プロパティをコンテナーのクラスの要素に適用しています。 column-count の値が 3 なので、内容物は同じ寸法の 3 つの段に並べられます。

段組みレイアウトは、文書全体が印刷ページに分割されるように行ボックスに分割することから、ページ付きメディアに密接に関連します。従って、 CSS 断片化仕様書に定義されているプロパティが、段間の内容物の区切り位置を制御するために必要になりました。

• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns

• break-after
• break-before
• break-inside
• orphans
• widows

段組みの基本概念

段組みレイアウト仕様の概要です。

段のスタイル付け

段間罫と段間の空間の使い方です。

段抜きと段の均衡

すべての段にまたがる要素の作り方と、段を埋める方法の制御です。

段組みでのはみ出しの扱い

アイテムが段をあふれたときに起こることと、段内の内容物が多すぎてコンテナーに収まらない場合に起こることです。

段組みにおける内容の分割の扱い

分割の仕様とどこで内容を区切るかの制御方法です。

他の CSS レイアウト技術には以下のようなものがあります。

• CSS フレキシブルボックスレイアウト (CSS フレックスボックス)
• CSS グリッドレイアウト