grid-row プロパティ
grid-row プロパティは、display:grid;によるエレメント（グリッドコンテナ）の子エレメント（グリッドアイテム）の行（横並び）単位の位置と連結数を指定するプロパティです。 grid-row プロパティはグリッドアイテムに指定します。
grid-row プロパティによって以下のプロパティを一括して指定できます。
grid-row: 2/span 2;
ページ内 Index
構文(Syntax)
CSS
grid-row: grid-area-names | [ grid-row-start / grid-row-end ];
DOM ( JavaScript )
String = object.style.gridRow;
object.style.gridRow=" grid-area-names | [ grid-row-start / grid-row-end ]";
値（Values）
| Value | 摘要 |
|---|---|
| grid-area-names | 領域名を定義 |
| grid-row-start | 行（縦）の表示位置か、行（縦）への連結数 |
| grid-row-end | 行（縦）の指定位置の1つ前に表示するか、行（縦）への連結数 |
備考（Remarks）
| 初期値（Default value） | auto auto |
| 継承（Inherited） | No |
| CSS Animation | Yes |
Example
grid-row の例です。 親エレメントの display:grid; や display-* プロパティによって9つに分割した領域で、contents01のgrid-row:2/span2; によって、contents01 が contents00 の下に移動し、領域が２つ分確保されてています。 確保された分で contents08 がズレています。
関連するプロパティ
以下は関連するプロパティです。
| プロパティ | 概要 |
|---|---|
| display:grid; | 並びを設定することができるdisplayプロパティ |
| grid-area | グリッドアイテムに名称を指定 |
| grid-auto-columns | グリッドアイテムの幅 |
| grid-auto-flow | グリッドコンテナの領域を自動的に拡張 |
| grid-auto-rows | 全てのグリッドアイテムの高さ |
| grid-column | グリッドアイテムの列単位の位置と連結数 |
| grid-column-end | 列単位の位置や連結数 |
| grid-column-gap | 列同士のギャップ幅 |
| grid-column-start | 列単位（横）の位置や連結数 |
| grid-gap | グリッドアイテムどうしのギャップのサイズ |
| grid-row | グリッドアイテムの行（縦）の表示位置とサイズ |
| grid-row-end | 行単位の位置や連結数 |
| grid-row-gap | 行同士のギャップ幅 |
| grid-row-start | 行単位の位置や連結 |
| grid-template | グリッドアイテムの並び数やサイズ |
| grid-template-areas | グリッドアイテムの配置や連結 |
| grid-template-columns | グリッドアイテムの列の並び数、幅 |
| grid-template-rows | グリッドアイテムの行の並び数と高さ |