grid-row-gap プロパティ

　grid-row-gap プロパティは、display:grid; によるエレメント（グリッドコンテナ）において、縦方向の子エレメント（グリッドアイテム）どうしの余白のサイズを指定するプロパティです。
　grid-row-gap プロパティは、display:grid; を設定するグリッドコンテナに指定します。

グリッドアイテム間のギャップをグリッドコンテナ高さの10%に（Exampleを参照）

.grid_container{
	display: grid;
	grid-row-gap: 10%;
}

　縦方向と横方向を一括して指定する場合は、grid-gap プロパティを指定します。
　横方向の指定は、grid-column-gap を使用します。

ページ内 Index

構文（Syntax）
値（Values）
備考（Remarks）
Example
関連する CSS プロパティ

構文(Syntax)

CSS

grid-row-gap: length;

DOM ( JavaScript )

値の取得

String = object.style.gridRowGap;

値の設定

object.style.gridRowGap="length";

値（Values）

Value	摘要
0	初期値（default値）
length	CSS長さの単位

備考（Remarks）


初期値（Default value）	0
継承（Inherited）	No
CSS Animation	Yes

Example

　grid-row-gapの例です。親エレメントのgridプロパティによって9つに分割した領域で、領域同士の高さのギャップを指定しています。

関連するプロパティ

　以下は関連するプロパティです。


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	グリッドアイテムの行の並び数と高さ