備忘録的プログラミングリファレンス

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)

CSS

grid-row-gap: length;

DOM ( JavaScript )

値の取得
String = object.style.gridRowGap;
値の設定
object.style.gridRowGap="length";

値(Values)

Value摘要
0初期値(default値)
lengthCSS長さの単位

備考(Remarks)

初期値(Default value)0
継承(Inherited)No
CSS AnimationYes

Example

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