Created:2026/03/03
Updated:2026/03/04
Author:
Takeshi Takatsudo

マルチカラムレイアウト

問題

新聞スタイルの段組みテキストやmasonry/Pinterestスタイルのレイアウトを作るには、従来はJavaScriptライブラリや複雑なCSS Gridのハックが必要でした。AIエージェントは、CSS Multi-Column Layout（ネイティブのCSSモジュールで、わずかなプロパティでカラムベースのコンテンツフローを処理できる）を検討せずに、こうした重い解決策に手を出しがちです。優れたブラウザサポートにもかかわらず、マルチカラムレイアウトは広く活用されていません。特に、JavaScriptなしでコンテンツをカラムを通じて縦方向にフローさせる機能は注目に値します。

解決方法

CSS Multi-Column Layoutは columns プロパティ系を使ってコンテンツを複数のカラムに分割します。コンテンツは各カラム内で上から下へ流れ、次のカラムの上部に続きます。これは新聞とまったく同じ挙動です。この縦方向のフローこそが、行を左から右に埋めるCSS Gridとの主な違いです。

このモジュールはインラインのテキストコンテンツ（記事、段落）とブロックレベルの要素（カード、画像）の両方に対応しており、さまざまなレイアウトパターンに活用できます。

基本原則

column-count vs column-width

カラムを定義する2つの基本的なアプローチがあります：

/* Fixed number of columns */
.fixed-columns {
  column-count: 3;
}

/* Minimum column width — browser decides the count */
.flexible-columns {
  column-width: 250px;
}

/* Shorthand: column-width then column-count */
.shorthand {
  columns: 250px 3; /* At least 250px wide, at most 3 columns */
}

column-count はコンテナの幅に関係なく指定した数のカラムを作ります。column-width は最小幅を設定し、ブラウザが何カラム収まるかを計算します。指定値より広くなることはありますが、狭くなることはありません。レスポンシブレイアウトでは、column-width のみを使う方がメディアクエリなしでビューポートに適応するため、通常はより良い選択です。

Gap と Rule

.styled-columns {
  column-count: 3;
  column-gap: 2rem;          /* Space between columns */
  column-rule: 1px solid hsl(0 0% 80%); /* Vertical divider */
}

column-gap はカラム間のスペースを制御します（デフォルトは 1em）。column-rule はカラム間に縦線を描きます。border と同じ構文を使います。ルールはスペースを取らず、gapの中央に描画されます。

break-inside によるカードの分割防止

ブロックレベルの要素（カード、figure、リストアイテム）がマルチカラムコンテナに配置されると、ブラウザがカラム境界をまたいで分割することがあります。これを防ぐには：

.card {
  break-inside: avoid;
}

各カードが単一のカラム内に収まるべきmasonryスタイルのカードレイアウトでは必須です。

コード例

マガジンテキストレイアウト

column-count と column-gap、column-rule を使ったクラシックな新聞スタイルの段組みテキストです。テキストはカラム間を自然に流れます。

column-count を使ったマガジンテキストレイアウト

幅ベースのレスポンシブカラム

column-count なしで column-width を使うと、ブラウザが何カラム収まるかを自動的に判断します。これは自然にレスポンシブです。メディアクエリは不要です。指定した幅は最小値で、ブラウザはカラムを広くすることはあっても狭くすることはありません。

column-width によるレスポンシブカラム（リサイズして確認）

Masonry スタイルのカードギャラリー

マルチカラムコンテナ内のブロックレベルカードに break-inside: avoid を付けて、カードがカラムをまたいで分割されるのを防ぎます。高さの異なるカードでmasonryエフェクトを示しています。

break-inside: avoid を使ったMasonryカードギャラリー

break-inside: avoid がなければ、ブラウザはカードをカラム境界で分割し、カードの上半分が1つのカラムに、下半分が次のカラムに表示されます。マルチカラムコンテナ内のブロックレベルコンテンツには、このプロパティが不可欠です。

カラムスパン

column-span: all を使って、カラムフローから抜け出す全幅の要素を作ります。見出し、プルクオート、セクション区切りなど、すべてのカラムにまたがるべき要素に使います。

column-span: all によるカラムスパン

column-span は all または none のみを受け付けます。特定のカラム数にまたがることはできません。スパンする要素はカラムフローを中断し、その下に新しいカラムコンテキストが始まります。

Columns vs Grid の比較

マルチカラムレイアウトとCSS Gridはどちらもマルチカラムの見た目を作りますが、コンテンツのフロー方向が根本的に異なります。Columnsはコンテンツを縦方向（上から下、次のカラムへ）にフローさせ、Gridはコンテンツを横方向（左から右、行ごと）にフローさせます。

Multi-Column（縦方向フロー） vs CSS Grid（横方向フロー）

マルチカラムレイアウトでは、アイテムは最初のカラムを1-2-3と下に並び、2番目は4-5-6、3番目は7-8-9となります。CSS Gridでは、アイテムは行ごとに埋まります：最初の行が1-2-3、2番目の行が4-5-6、3番目の行が7-8-9です。

マルチカラムを使う場面： コンテンツが新聞のように縦方向にフローすべき場合 — 長文テキスト、画像ギャラリー、masonryカードレイアウト。

CSS Gridを使う場面： アイテムが横方向に左から右に埋まるべき場合 — 商品グリッド、ダッシュボード、フォームレイアウト、水平方向の順序が重要なデザイン。

AIがよくやるミス

マルチカラムレイアウトを完全に無視する。 AIエージェントは、masonryレイアウトや新聞スタイルのテキストを作るよう求められると、ほぼ常にCSS GridやJavaScriptに手を出します。マルチカラムレイアウトの方がシンプルで、これらのユースケースにより適切です。
column-width の方が良いのに column-count を使う。 固定のカラム数は狭いビューポートで崩れます。column-width はメディアクエリなしで自然なレスポンシブ性を提供します。
ブロックレベルコンテンツに break-inside: avoid を忘れる。 これがないと、カード、画像、その他のブロック要素がカラム境界をまたいで分割されます。非常によくあるビジュアルバグです。
column-span が数値を受け付けると期待する。 column-span: all または column-span: none のみが有効です。3カラムのうち2カラムにまたがることはできません。
マルチカラムのフロー方向をGridと混同する。 マルチカラムレイアウトではコンテンツは上から下にフローします。横方向（行ごと）の順序が必要な場合は、CSS Gridが正しいツールです。
break-inside: avoid なしで margin-bottom を使う。 カラムコンテナ内では、ブロックアイテムのmarginはカラム区切りを防ぎません。カードスタイルのレイアウトでは、常にmarginと break-inside: avoid を組み合わせましょう。

使い分け