grid-row

レイアウト・配置

グリッドアイテムが占める行の範囲を指定する短縮プロパティです。grid-row-startとgrid-row-endを一括指定。

構文

Syntax
grid-row: <start-line> / <end-line>

コード例

例 1

grid-row: span 2;
実行結果
1
grid-row: span 2
3
4
5
2番目が2行分を占有

2行分の高さを占める

例 2

grid-row: 1 / 4;
実行結果
1
grid-row: 1 / 4
3
4
2番目が行1〜4を占有

1行目から4行目まで

💡 TIPS

grid-columnと組み合わせて、複雑なレイアウトを実現。カード型レイアウトで特定のアイテムを大きく表示する際に便利。

⚠️ よくある間違い

終了位置は「その行の手前」を指す。行番号も1から始まる。

関連プロパティ

ブラウザサポート

Chrome 57+, Firefox 52+, Safari 10.1+