プロパティ column-gap

プロパティ column-gap は、段組レイアウトにおける段間の間隔、およびグリッドレイアウトにおける列間の間隔を指定します。プロパティの値には、任意のサイズ単位またはキーワード normal （デフォルト）が使用でき、後者の場合ブラウザが最適な段間の間隔を自動的に決定します。

構文

セレクタ {
	column-gap: 値;
}

例

この例では、段の数 column-count （3 つ）と段間の間隔 column-gap を 50px で指定しています。段の幅はこれらの条件（段の数と段間の間隔）を満たすように自動的に調整されます：

<div id="elem">
	some long text
</div>

#elem {
	column-count: 3;
	column-gap: 50px;
	text-align: justify;
}

例 . 値 normal

この例では、段の幅 column-width を 150px、段の数 column-count を auto、段間の間隔 column-gap を normal に設定しています。これにより、ブラウザが必要な段の数と段間の間隔を自動的に決定します（ただし、段の幅は 150px になります）：

<div id="elem">
	some long text
</div>

#elem {
	column-gap: normal;
	column-count: auto;
	column-width: 150px;
	text-align: justify;
}

例

グリッドレイアウトにおける列間の間隔を設定してみましょう：

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	column-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 2;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 3 / 4;
}

例

次に、列間の間隔を % 単位で設定してみましょう：

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	column-gap: 5%;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 2;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 3 / 4;
}

プロパティ column-gap

構文

例

例 . 値 normal

例

例

関連項目