Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

gap

フレックスコンテナまたはグリッドコンテナ内のアイテム間の間隔をまとめて指定します。『row-gap』と『column-gap』のショートハンドです。

サンプルコード

/* 行・列ともに同じ間隔 */
.container { display: flex; flex-wrap: wrap; gap: 20px;}

/* 行と列で異なる間隔（行間 列間） */
.container-diff { display: flex; flex-wrap: wrap; gap: 10px 20px;}

/* グリッドでも使用可能 */
.grid { display: grid; gap: 16px;}

指定可能な値一覧

値	概要
<length>	px、em、remなどの長さの値で間隔を指定します。
<percentage>	コンテナのサイズに対するパーセンテージで間隔を指定します。
<row-gap> <column-gap>	2つの値を指定した場合、1つ目が行間、2つ目が列間になります。

仕様情報

項目	内容
初期値	normal（Flexboxでは0に相当）
適用対象	フレックスコンテナ、グリッドコンテナ、マルチカラムコンテナ
継承	しない
アニメーション	可能（length/percentage として補間）

対応ブラウザ

デスクトップ

Chrome

57 以降 ○

56 以前 ×

Firefox

52 以降 ○

51 以前 ×

Safari

10.1 以降 ○

9 以前 ×

Edge

16 以降 ○

全バージョンで対応しています

11 ×

10 ×

9 ×

8 ×

7 ×

6 ×

Opera

44 以降 ○

43 以前 ×

モバイル

iOS Safari

10.3 以降 ○

9 以前 ×

Android Browser

57 以降 ○

56 以前 ×

Chrome Android

概要

『gap』はアイテム間の間隔を指定するプロパティです。FlexboxとCSS Gridの両方で使用できます。以前はCSS Grid専用の『grid-gap』というプロパティ名でしたが、Flexboxにも適用されるようになり『gap』に改名されました。

『margin』との違い

アイテム間の間隔を作る方法として『margin』も使えますが、『gap』にはいくつかの利点があります。

特徴	gap	margin
間隔の対象	アイテム間のみ	アイテムの外側全体
両端の余白	なし（アイテム間のみ）	最初と最後のアイテムにも余白が付く
折り返し時	自動的に適切な間隔が付く	折り返しの端にも余白が付く

『gap』はアイテム間にのみ間隔を設けるため、コンテナの端には余計な余白が付きません。これが『margin』で間隔を作る場合との最大の違いです。

パターン1: カードレイアウト

/* カードを折り返しながら等間隔で配置 */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.card {
    flex: 1 1 280px;
}

パターン2: 行と列で異なる間隔

/* 行間は広く、列間は狭く */
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 16px;  /* 行間32px 列間16px */
}

IE対応のフォールバック

IE10/IE11ではFlexboxの『gap』に対応していません。IE対応が必要な場合は『margin』で代用します。

/* IE対応のフォールバック */
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;  /* モダンブラウザ用 */
}
/* IE向け: marginで代用 */
@supports not (gap: 20px) {
    .container { margin: -10px;}
    .container > * { margin: 10px;}
}

WebProgrammingPortalウェブプログラミングポータル