グリッド領域配置プロパティ

最終更新：2026-09-13

grid-area グリッド領域配置プロパティ

grid-area は、grid-row-start、grid-column-start、grid-row-end、grid-column-end の 4 つの値を一度に設定してグリッドアイテムを配置するショートハンドです。正確な配置にはグリッドライン番号を、あるいは grid-template-areas で定義した名前付き領域を使えます。グリッド配置において最も柔軟なプロパティです。

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

📝 構文

grid-area: <grid-line> [ / <grid-line> ]{0,3};

⚙️ 値

値	タイプ	説明
`<grid-line> [ / <grid-line> ]{0,3}`	値	グリッド領域のショートハンド

▶ 例

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

▶ 試す

🌐 ブラウザーサポート

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

ヒント： grid-area の値が領域名の場合、アイテムは grid-template-areas で定義された対応する領域に配置されます。

ヒント： 4 つの値の順序は次のとおりです: grid-row-start / grid-column-start / grid-row-end / grid-column-end。

❓ よくある質問

Qgrid-area のショートハンドと領域名は同じものですか？

A両者は関連していますが異なります。grid-area プロパティはグリッドアイテムに使って配置します。その値は 4 つのグリッドライン番号、あるいは単一の領域名になります。grid-template-areas テンプレート内の "header" のような文字列は領域識別子です。grid-area: header と書くと、テンプレートで定義された名前付き領域を参照します — 両者は領域名を介して結びついています。

Q名前付き領域とグリッドライン番号、どちらが優れていますか？

A絶対的な勝者はありません。名前付き領域は最も読みやすく、ページ全体のレイアウトに向いています。名前を grid-template-areas に書き込めば、子要素は配置に grid-area: header と書くだけで済み、レイアウト変更はコンテナテンプレートの編集だけで済みます。グリッドライン番号は、2 列跨ぎが必要なカードのような局所的な跨度調整により正確です。実際のプロジェクトでは通常両方を混用します。ページの骨組みには名前付き領域、内部の詳細にはグリッドラインを使います。

Qgrid-area: 1 / 1 / 3 / 3 の 4 つの値は何を表しますか？

A4 つの値は順に grid-row-start / grid-column-start / grid-row-end / grid-column-end に対応します。アイテムは行 1 と列 1 の交点で始まり、行 3 と列 3 の交点で終わり、2×2 の長方形を占めます。「行開始、列開始、行終了、列終了」の順を覚えておいてください。省略された後続の値は auto になります。