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

grid-gapプロパティ

 grid-gapプロパティは、display:grid;によるエレメント(グリッドコンテナ)の子エレメント(グリッドアイテム)どうしのギャップのサイズを指定するプロパティです。 grid-gapプロパティはグリッドコンテナに指定します。
 grid-gapプロパティは以下のプロパティを一括して指定できます。

グリッドアイテム間のギャップをグリッドコンテナ高さの10%とグリッドコンテナ幅の5%に
.grid_container{
	display: grid;
	grid-gap: 10% 5%;
}

 指定する値が1つのときは高さ、幅ともに同じ値で設定されます。

構文(Syntax)

CSS

grid-gap: grid-row-gap grid-column-gap ;

DOM(JavaScript)

値の取得
String = object.style.gridGap;
値の設定
object.style.gridGap=" grid-row-gap grid-column-gap ";

Values

Value摘要
grid-row-gapグリッドアイテム間の高さ
grid-column-gapグリッドアイテム間の幅

備考(Remarks)

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