grid ショートハンドプロパティ

最終更新：2026-09-13

grid grid ショートハンドプロパティ

grid プロパティは CSS Grid のショートハンドです。1 つの宣言でグリッドコンテナの明示トラック、自動トラック、自動配置方向（auto-flow）を設定します。grid-template 系と grid-auto 系の集合体であり、グリッド構造全体を記述したいときに使える最も包括的なショートハンドです。

カテゴリ
初期値	none
継承	いいえ
適用対象	すべての要素
アニメーションタイプ	discrete
CSS バージョン	CSS3
状態	標準

📝 構文

grid: <grid-template> | <grid-template-rows> / [ <grid-auto-flow>? <grid-auto-columns>? ]?;

⚙️ 値

値	タイプ	説明
`<grid-template>`	タイプ	明示的グリッドのショートハンド
`<grid-template-rows> / [ <grid-auto-flow>? <grid-auto-columns>? ]`	値	行/列のショートハンド

▶ 例

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

▶ 試す

🌐 ブラウザーサポート

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

ヒント： grid ショートハンドでは、スラッシュ / の前が行トラック、後ろが列トラックで、grid-template の記述順と一致します。

注意： grid ショートハンドは、明示的に宣言していないすべてのグリッドプロパティ（grid-auto-flow など）をリセットします。使う際はこのリセット範囲に注意してください。

❓ よくある質問

Qgrid と grid-template の違いは何ですか？

Agrid はより包括的なショートハンドです。明示トラック、暗黙トラック、自動配置方向を一度にリセットし、グリッドをきれいに初期化するのに便利です。grid-template は明示トラック（行・列・領域）だけを設定し、grid-auto-* 系には触れないため副作用が少なく、明示構造だけを調整したい場合に向いています。

Qいつ grid ショートハンドを使うべきですか？

Aグリッド構造全体を一度に定義したい場合や、すべてのグリッド関連プロパティをリセットしたい場合に grid ショートハンドを使います。一部分（列幅だけなど）を変えたい場合は、代わりに grid-template-columns のような単一プロパティを使い、ショートハンドが他の設定を誤ってリセットするのを防ぎます。チームではどちらの書き方かに統一し、混在による見えないリセットを避けてください。

Qgrid: 200px 1fr / 1fr 2fr は行と列にどう対応しますか？

Agrid ショートハンドでは、スラッシュの左が grid-template-rows（行）、右が grid-template-columns（列）です。つまり grid: 200px 1fr / 1fr 2fr は 2 つの行（200px と 1fr）と 2 つの列（1fr と 2fr）を定義します。「行が先、列が後」を覚えてください。列だけを書く直感とは逆なので、ブラウザで結果を確認しましょう。