レイアウト
gap
gap は、フレックスボックスやグリッド、段組みの中で、項目の行と行の間（row-gap）と、列と列の間（column-gap）をまとめて指定します。
構文
<'row-gap'> <'column-gap'>?プレビュー
1234
プリセット
見本
右下の角をドラッグするとサイズを変えられます
コード
.box {
display: flex;
flex-wrap: wrap;
gap: 16px 8px;
}コントロール
row-gap16px
column-gap8px
1234
解説
値の書き方
行の間、列の間の順にスペースで区切って書きます（gap: 16px 8px）。1 つだけ書くと、両方が同じ値になります。それぞれ row-gap・column-gap として別々に書くこともできます。
normal：初期値です。フレックスボックスとグリッドでは 0、段組み（columns）の列の間では 1em です。- 長さ・%：負の値は使えません。% は箱の中身の幅や高さに対する割合です。
空くのは項目の間だけ
gap は項目と項目の間にだけ空きを入れ、箱の端（最初の項目の前や、最後の項目のあと）には入れません。端も空けたいときは padding を使います。
このページのプレビューは、補助の宣言で display: flex と flex-wrap: wrap にして、箱の幅の 30% の項目を 4 つ並べています。フレックスボックスで折り返すときは、列の間の空きも 1 行に入るかどうかの計算に入るので、column-gap を大きくすると 3 つが 1 行に入らなくなり、2 つずつに分かれます。
古い名前
以前はグリッド専用の grid-gap・grid-row-gap・grid-column-gap という名前でした。今のブラウザはどちらも読みますが、新しく書くときは gap を使います。