gap行と列をまとめて指定
1つの値なら行と列の両方、2つなら「行のすき間、列のすき間」の順に指定します。
gap
Grid・Flexbox・段組みで、並んだ要素どうしのすき間をつくるプロパティ。行と列の間隔を別々に動かし、1値と2値の違いを確かめられます。
遊んでみよう
Gridの行間と列間を比較
1234
行 列
CSS
.element gap: 20px 28px;
値のパターン
gapの構成要素
row-gap行どうしのすき間
Gridの上下の行間を指定します。折り返すFlexboxでは、フレックス行どうしの間隔にも使われます。
column-gap列どうしのすき間
Gridの左右の列間を指定します。Flexboxの項目間や段組みの段間にも使われます。
早見表
初期値はnormalで、GridとFlexboxでは通常0として計算されます。まずはpxで1値と2値を比べます。
01
normalレイアウト方式に任せる初期値02
0すき間をつくらない要素が接する03
16px行と列を同じ間隔に1値04
12px 24px行12px・列24px2値05
5%コンテナーを基準にする割合06
clamp(8px, 2vw, 24px)画面幅に合わせる範囲内で可変よくある使い方
01
カード一覧の間隔を揃える
Gridコンテナーへ指定すると、カードの外側ではなくカードどうしの間だけを均等に空けられます。
.cards { display: grid; gap: 24px; }02
折り返すタグを並べる
Flexboxで折り返す項目には、行と列を分けて指定すると縦横の密度を調整できます。
.tags { display: flex; flex-wrap: wrap; gap: 8px 12px; }03
段組みの文章を読みやすくする
段組みレイアウトでは、文章の列どうしを離して視線が隣の段へ移りにくくします。
.article { columns: 3; gap: 2rem; }ポイント
gapは要素の間だけ。外側の余白は増えない。
gapは並んだ項目の間にだけ空間をつくるため、最初と最後の項目の外側には余白を追加しません。コンテナーの内側を空けるならpadding、個別の要素の外側を調整するならmarginを使います。gapはGrid・Flexbox・段組みのコンテナーに適用され、子要素へ継承されません。Flexboxで2値を使うときは、flex-directionによって行と項目の向きが変わる点にも注意します。
関連するCSSも見てみよう。
gap と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。