CSS ・ Flexbox・Grid
gap
アイテム間の間隔
Flexbox や Grid で、子要素同士の間隔を指定します。端には余白を付けず、要素の間だけに隙間をつくれます。
01
サンプルコード
HTML
1<div class="flex">
2 <div class="item">A</div><div class="item">B</div><div class="item">C</div>
3</div>
4<div class="grid">
5 <div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div>
6</div>
CSS
1.flex {
2 display: flex;
3 gap: 16px;
4 margin-bottom: 16px;
5}
6.grid {
7 display: grid;
8 grid-template-columns: repeat(2, 120px);
9 gap: 8px 24px;
10}
11.item {
12 padding: 8px 14px;
13 background: #b68235;
14 color: #fff;
15}
02
実行結果
ブラウザでの表示
03
解説
gap は、並んだ子要素の「間」だけに隙間をつくるプロパティです。親要素に指定します。
margin で間隔をつくると、最初や最後の要素の外側にも余白が付いて調整が必要になります。gap なら要素の間だけに付くので簡単です。
値を2つ書くと「行の間隔（縦）」「列の間隔（横）」の順になります。row-gap・column-gap で別々にも指定できます。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
gap: 16px | 縦横とも16px |
gap: 8px 24px | 行の間隔8px、列の間隔24px |
row-gap | 行と行の間隔だけ |
column-gap | 列と列の間隔だけ |
gap: 2% | 親要素の大きさに対する割合 |
タグを折り返して並べる
flex-wrap と組み合わせると、折り返した行の間にも隙間が付きます。
HTML
1<ul class="tags">
2 <li>HTML</li><li>CSS</li><li>Flexbox</li><li>Grid</li>
3</ul>
CSS
1.tags {
2 display: flex;
3 flex-wrap: wrap;
4 gap: 6px;
5 list-style: none;
6 padding: 0;
7}
注意点
- 01gap は display: flex や grid を指定した親要素に書きます。通常のブロック要素には効きません。
- 02間隔に負の値は指定できません。