CSS

The CSS `gap` property is used to easily set the spacing between items within a grid or flex container.

gap

　CSSの gapプロパティは、グリッドレイアウトやフレックスレイアウトのコンテナ内のアイテム間のスペースを設定するために使用されます。

用途
グリッドコンテナやフレックスコンテナ内の行や列の間にスペースを設定する。
使用できるコンテナ
display: grid; または display: flex; を指定した要素。

　gapプロパティは、

row-gap
行間のスペースを個別に設定します。
column-gap
列間のスペースを個別に設定します。

　この2つのプロパティをまとめた、プロパティになります。gapプロパティは、行間および列間の両方に適用されるスペースを一度に設定します。

構文

CSS

/* グリッドレイアウトの場合 */
.grid-container {
	display: grid;
	gap: 10px; /* 行と列の間に10pxのスペースを設定 */
}

/* フレックスレイアウトの場合 */
.flex-container {
	display: flex;
	gap: 10px; /* アイテム間に10pxのスペースを設定 */
}

Sample 1

　gapプロパティに値を１つだけ設定（gap: 10px;）した場合のサンプルです。ラジオボタンで値を変更すると行と列の間のスペースが同時に変更されます。

1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

HTML

<div class="smp1value">
	<label><input type="radio" name="gap" value="10px" checked> 10px</label>
	<label><input type="radio" name="gap" value="20px"> 20px</label>
	<label><input type="radio" name="gap" value="30px"> 30px</label>
</div>

<div class="smp1">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

<div class="smp2">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

<script>
	<!-- JavaScript code here -->
</script>

CSS

.smp1 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	gap: 10px;
	margin: 1em auto;
	background-color: palegreen;
}
.smp1 div {
	background-color: green;
	text-align: center;
	padding: 1em;
}
.smp2 {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 1em auto;
	background-color: palegreen;
}
.smp2 div {
	background-color: green;
	padding: 1em 2em;
}

JavaScript

document.querySelectorAll('input[name="gap"]').forEach((radio) => {
	radio.addEventListener('change', (event) => {
		const gapValue = event.target.value;
		document.querySelector('.smp1').style.gap = gapValue;
		document.querySelector('.smp2').style.gap = gapValue;
	});
});

Sample 2

　gapプロパティに値を２つ設定（gap: 10px 10px;）した場合のサンプルです。行と列の間のスペースがそれぞれ別々に変更されます。

Column Gap:


Row Gap:


Current Gap Setting:
gap: 10px 10px;
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

HTML

<dl class="smp2value">
	<dt>Column Gap:</dt>
	<dd>
		<label><input type="radio" name="column-gap" value="10px" checked> 10px</label><br>
		<label><input type="radio" name="column-gap" value="20px"> 20px</label><br>
		<label><input type="radio" name="column-gap" value="30px"> 30px</label>
	</dd>

	<dt>Row Gap:</dt>
	<dd>
		<label><input type="radio" name="row-gap" value="10px" checked> 10px</label><br>
		<label><input type="radio" name="row-gap" value="20px"> 20px</label><br>
		<label><input type="radio" name="row-gap" value="30px"> 30px</label>
	</dd>

	<dt>Current Gap Setting:</dt>
	<dd><span id="gap-setting">gap: 10px 10px;</span></dd>
</dl>

<div class="smp3">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

<div class="smp4">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

<script>
	<!-- JavaScript code here -->
</script>

CSS

.smp2value dd:nth-of-type(3) {
	margin-left: 4em;
}
.smp3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	gap: 10px 10px;
	margin: 1em auto;
	background-color: palegreen;
}
.smp3 div {
	background-color: green;
	text-align: center;
	padding: 1em;
}
.smp4 {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 10px;
	margin: 1em auto;
	background-color: palegreen;
	max-width: 560px;
}
.smp4 div {
	background-color: green;
	padding: 1em 2em;
}

JavaScript

const updateGapSetting = () => {
	const columnGap = document.querySelector('input[name="column-gap"]:checked').value;
	const rowGap = document.querySelector('input[name="row-gap"]:checked').value;
	const gapSetting = `gap: ${rowGap} ${columnGap};`;
	document.getElementById('gap-setting').textContent = gapSetting;

	document.querySelector('.smp3').style.gap = `${rowGap} ${columnGap}`;
	document.querySelector('.smp4').style.gap = `${rowGap} ${columnGap}`;
};

document.querySelectorAll('input[name="column-gap"]').forEach((radio) => {
	radio.addEventListener('change', updateGapSetting);
});

document.querySelectorAll('input[name="row-gap"]').forEach((radio) => {
	radio.addEventListener('change', updateGapSetting);
});

// 初期値の設定を表示
updateGapSetting();