grid-column-gap プロパティ

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

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

.grid_container{
	display: grid;
	grid-column-gap: 5%;
}

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

ページ内 Index

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

構文(Syntax)

CSS

grid-column-gap: length;

DOM ( JavaScript )

値の取得

String = object.style.gridColumnGap;

値の設定

object.style.gridColumnGap="length";

値（Values）

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

備考（Remarks）


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

Example

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