row-gap

この記事では「row-gap」について、基本の意味と使い方を初心者向けにやさしく説明します。

Cascading Style Sheets row-gap property.

行同士の間隔を指定する

　row-gapプロパティは、アイテム同士の行方向（row）の間隔を指定する際に使用します。

　row-gapプロパティの実際の挙動は、グリッドレイアウト・フレキシブルレイアウト・マルチカラムレイアウトなど、row-gapプロパティを適用するレイアウトコンテナの種類によって異なります。

　初期値の normal は、マルチカラムレイアウトでは 1em と算出されますが、それ以外のレイアウトでは 0px となります。

　column-gapプロパティはマルチカラムレイアウトに適用されますが、現在のところ row-gapプロパティはマルチカラムレイアウトには適用されません。

　row-gapプロパティは、テーブルのセル同士の間隔を制御する目的では使用しません。そのような目的には border-spacingプロパティを使用してください。

　row-gapプロパティに負の値を指定することはできません。

値

normal

マルチカラムレイアウトでは 1em、それ以外のレイアウトでは 0px。（初期値）

長さ

数値や %値でアイテム同士の行方向（row）の間隔を指定。

初期値・適用対象・値の継承

初期値

normal

適用対象

マルチカラム要素、フレックスコンテナ、グリッドコンテナ

値の継承

しない

Sample

<div class="sample">
	<div>①</div>
	<div>②</div>
	<div>③</div>
	<div>④</div>
	<div>⑤</div>
	<div>⑥</div>
	<div>⑦</div>
	<div>⑧</div>
	<div>⑨</div>
</div>

.sample {
	display: grid;
	grid-template-rows: 80px 100px 40px;
	grid-template-columns: 50px 100px 40px;
	row-gap: 100px;
	column-gap: 10px;
	background-color: palegreen;
	margin: 10px;
}

.sample div {
	background-color: green;
	padding: 4px;
}