CSS grid-row 属性

定義と使用法

grid-row 属性は、グリッドアイテムのサイズとグリッドレイアウト内の位置を定義し、以下の属性のショートカット属性です：

参照してください：

CSS タイプ：CSS グリッドレイアウト

例

例 1

"item1" を行 1 から始め、2行を横切るようにします：

.item1 {
  grid-row: 1 / span 2;
}

自分で試してみてください

例 2

行線の値を使用して、横切る行数を指定できます：

.item1 {
  grid-row: 1 / 3;
}

自分で試してみてください

CSS 文法

grid-row: grid-row-start / grid-row-end;

属性値

値 説明
grid-row-start どの行から表示を開始させるかを指定します。
grid-row-end どの行線で表示を停止させるか、または何行を横切るかを指定します。

技術的詳細

デフォルト値： auto / auto
継承： いいえ
アニメーション作成： サポート。参照してください：アニメーション関連属性。
バージョン： CSS Grid Layout Module Level 1
JavaScript 文法： object.style.gridRow="2 / span 2"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44