マルチカラムレイアウトの例

column-count: 3;
説明: 要素を3つの列に分割します。子要素が自動的に3つの列に配置されます。

column-gap: 20px;
説明: 各列の間に20ピクセルのギャップを設定します。列と列の間にスペースができ、読みやすくなります。

break-inside: avoid;
説明: 列の内部で改ページ(break)や分割(break)を避けるよう指示します。一つの要素が列をまたいで分割されることがなくなります。例えば、大きな画像や段落が途中で分割されずに一つの列に収まるようになります。

コンテンツ1
コンテンツ2
コンテンツ3
コンテンツ4
コンテンツ5
コンテンツ6
コンテンツ7
コンテンツ8
コンテンツ9