グリッド行配置プロパティ
最終更新：2026-09-13
grid-row グリッド行配置プロパティ
grid-row は grid-row-start と grid-row-end のショートハンドです。グリッドアイテムを垂直方向に配置します。開始および終了のグリッドライン番号を指定することで、アイテムが跨ぐ行数を制御できます。grid-column と組み合わせることで、アイテムの位置とサイズを正確に制御できます。
| カテゴリ | |
|---|---|
| 初期値 | auto |
| 継承 | いいえ |
| 適用対象 | |
| アニメーションタイプ | |
| CSS バージョン | CSS3 |
| 状態 | 標準 |
📝 構文
grid-row: <grid-line> [ / <grid-line> ]?;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
<grid-line> / <grid-line> | 値 | グリッド行の配置 |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-row | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| すべての主要ブラウザーでサポート | |||||
ヒント： grid-row: span 2 は 2 行を跨ぎ、grid-column と同じ書き方です。
ヒント： 行ラインは上端から 1 で番号が付きます。負の数は下端から数え、-1 は最下端のラインです。
❓ よくある質問
Qgrid-row と grid-column は同時に使えますか？
Aはい。この 2 つのプロパティは垂直方向と水平方向の配置をそれぞれ独立して制御します（直交関係にあります）。例えば grid-row: 1 / 3 と grid-column: 2 / 4 を組み合わせると、アイテムが 2 行 2 列に跨ります。一方の方向だけを配置する場合、もう一方は auto 配置になります。4 つのグリッドライン値を一度に設定するには grid-area を使います。
Qグリッドアイテムを末尾まで自動的に延ばすにはどうすればよいですか？
Agrid-row: 1 / -1 を使うと、最初の行から最後の行まで跨ぎます。-1 は最後のグリッドラインを指すため、行数が変わってもアイテムは最後の行で終わります。同様に grid-column: 1 / -1 とすると、アイテムは行の全幅に跨ります。負のインデックスは、グリッド配置でトラック数が不確定な場合に最も実用的な方法です。
Qgrid-row: span 2 を単独で使えますか？
Aはい。span 値だけの場合、開始ラインは auto になり、ブラウザは自動配置アルゴリズムが選んだ位置にアイテムを配置し、その後下方向に 2 行延ばします。これは項目数が不確定なリストに適しています。開始位置も制御したい場合は grid-row: 2 / span 2 と書き、これはライン 2 から下方向に 2 行跨ぐことを意味します。span 形式は、ラインが並べ替えられる際に固定された終了ラインよりも安定しています。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
