gap

スペーシング・サイズ

FlexboxやGridで要素間の間隔を指定するプロパティです。row-gap（行間）とcolumn-gap（列間）を一括で指定でき、marginより直感的で管理しやすいです。レスポンシブなレイアウトの余白調整に最適です。

構文

Syntax

gap: <length> | <percentage>

🎮

要素間の間隔

16px

0px100px

.element {
  gap: 16px;
}

.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+