gap

スペーシング・サイズ

FlexboxやGridで要素間の間隔を指定するプロパティです。marginより直感的で管理しやすいです。

構文

Syntax

gap: <length> | <percentage>

.flex-container {
  display: flex;
  gap: 1rem;
}

実行結果

Item 1

Item 2

Item 3

Flexアイテム間に1remの間隔

.grid-container {
  display: grid;
  gap: 2rem 1rem;
}

実行結果

行間2rem、列間1remの間隔

gap: clamp(1rem, 3vw, 2rem);

実行結果

clamp(1rem, 3vw, 2rem)

レスポンシブ間隔

レスポンシブな間隔設定

marginと違って最初と最後の要素には適用されない。レスポンシブデザインに最適。

Chrome 84+, Firefox 63+, Safari 14.1+