Grid Column（grid-column）列配置プロパティ

最終更新：2026-09-13

grid-column Grid Column（grid-column）列配置プロパティ

grid-column は grid-column-start と grid-column-end のショートハンドです。グリッドアイテムを水平方向に配置します。開始と終了のグリッドライン番号を指定することで、アイテムが何列にまたがるかを制御できます。柔軟なグリッドレイアウトを作るための重要なプロパティです。

カテゴリ
初期値	auto
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

grid-column: <grid-line> [ / <grid-line> ]?;

⚙️ 値

値	タイプ	説明
`<grid-line> / <grid-line>`	値	グリッド列の配置

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
grid-column	✓ v57	✓ v16	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： span キーワードはカバーするトラック数を指定します。grid-column: span 2 は 2 列にまたがります。

ヒント： グリッドラインは 1 から番号が振られ、ライン 1 は最も左にあります。負の数は右から数え、-1 は最も右のラインです。

❓ よくある質問

Qgrid-column: 1 / 3 と 1 / span 2 の違いは何ですか？

Aほとんどの場合、両者は同じ結果になります。1 / 3 はライン 1 からライン 3 までを意味し、span 2 はライン 1 から始めて 2 トラックをカバーします。違いが現れるのはグリッド構造が変わったときです。span はトラック数を数えるため頑健なままですが、終了ラインを直接書くと列が追加されたときにずれることがあります。カバーするトラック数が分かっている場合は span を優先してください。

Qグリッドアイテムは重ねられますか？

Aはい。複数のグリッドアイテムを同じグリッド領域に配置して重ねることができ、どちらが上にあるかは z-index で制御します。これは雑誌風レイアウトや重ねられたラベル、その他の階層効果の基礎です。既定では自動配置アルゴリズムがアイテムを重ねることはありません。重なりが起きるのは、少なくとも 1 つのアイテムが同じグリッドラインで明示的に配置されたときだけなので、意図的な機能として扱ってください。ただし重ねるとコンテンツが隠れたりクリックを阻害したりするため、コンテンツがアクセス可能なままであることを確認し、通常のレイアウトでの意図しない重なりは避けてください。

Qgrid-column: span 2 の値が 1 つだけの場合はどう読めばよいですか？

A値が 1 つの場合、指定されていないラインは既定で auto になり、ブラウザーの自動配置アルゴリズムがアイテムの位置を決め、その後指定されたトラック数にまたがります。grid-column: span 2 は「次の空き位置に配置して 2 列にまたがる」という意味で、grid-column: 1 / span 2 はライン 1 から明示的に始まります。span の形式はグリッドラインが付け直されても安定しています。