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

grid-gapプロパティ

 grid-gapプロパティは、グリッドコンテナの子エレメント(グリッドアイテム)どうしの余白のサイズを指定するプロパティです。 grid-gapプロパティはグリッドコンテナに指定します。
 グリッドコンテナとは、display:grid;が設定されたエレメントのことです。

 grid-gapプロパティは以下のプロパティを一括して指定できます。

grid-row-gap
グリッドアイテムどうしの縦方向(列方向)の余白サイズ
grid-column-gap
グリッドアイテムどうしの横方向(行方向)の余白サイズ

グリッドアイテム間のギャップをグリッドコンテナ高さの10%とグリッドコンテナ幅の5%に
.grid_container{
	display: grid;
	grid-gap: 10% 5%;
}
詳しくは「grid-gap プロパティの例」を参照してください

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

 grid-template プロパティなどを設定していない状態では、グリッドアイテムが縦に並びます。 グリッドアイテムを縦横にレイアウトするためには、grid-templategrid-template-columnsgrid-template-rows プロパティを使用する必要があります。

グリッドアイテム間のギャップをグリッドコンテナ高さの10%とグリッドコンテナ幅の5%に
.grid_container{
	display: grid;
	grid-gap: 10% 5%;
	grid-template: 50px 50px 50px / 33% 33% 33%;
}
詳しくは「grid-template プロパティあり」を参照してください

ページ内 Index

構文(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

Example

grid-gap プロパティの例

 以下は grid-gap プロパティの例です。 grid-template プロパティなど使用しない場合は、グリッドアイテムは縦に並ぶデフォルトのレイアウトになります。

grid-template プロパティありの例

 以下は grid-template プロパティありの場合です。
 グリッドアイテムをレイアウトするには、grid-templategrid-template-columnsgrid-template-rows を使用する必要があります。
 以下の例で、グリッドコンテナの大きさはグリッドアイテムのレイアウトに追従して大きくならないことが分かります。