CSS gap 属性

定義と使用方法

gap 属性はフレックスフレーム、グリッド、または複数の列のレイアウトの中で行と列の間のギャップサイズを定義します。これは以下の属性の短縮形です：

注意：gap 属性は以前に grid-gap。

も参照してください：

CSS タイプライブラリ：CSS グリッドレイアウト

CSS タイプライブラリ：CSS フレックスフレームレイアウト

CSS タイプライブラリ：CSS 多列レイアウト

CSS リファレンスマニュアル：row-gap 属性

CSS リファレンスマニュアル：column-gap 属性

インスタンス

例 1

行と列の間のギャップを 50px に設定します：

.grid-container {
  gap: 50px;
}

実際に試してみてください

例 2：グリッドのレイアウト

グリッドのレイアウトで、行間のギャップを 20px、列間のギャップを 50px に設定します：

#grid-container {
  display: grid;
  gap: 20px 50px;
}

実際に試してみてください

例 3：フレックスフレームのレイアウト

フレックスフレームのレイアウトで、行間のギャップを 20px、列間のギャップを 70px に設定します：

#flex-container {
  display: flex;
  gap: 20px 70px;
}

実際に試してみてください

例 4：複数の列のレイアウト

複数の列のレイアウトで、列間のギャップを 50px に設定します：

#newspaper {
  columns: 3;
  gap: 50px;
}

実際に試してみてください

CSS 文法

gap: row-gap column-gap|initial|inherit;
値 説明
row-gap グリッドまたはフレックスフレームのレイアウトの中で、行間のギャップサイズを設定します。
column-gap グリッド、フレックスフレーム、または複数の列のレイアウトの中で、列間のギャップサイズを設定します。
initial この属性をデフォルト値に設定します。参照： initial。
inherit この属性は親要素から継承されます。参照： inherit。

技術的詳細

デフォルト値： normal normal
継承： いいえ
アニメーション作成： サポートされています。別の属性を確認してください。参照：アニメーション関連属性。
バージョン： CSS Box Alignment Module レベル 3
JavaScript 文法： object.style.gap="50px 100px"

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

レイアウト Chrome IE / Edge Firefox Safari Opera
グリッドの中で 66 16 61 12 53
フレックスフレームの中で 84 84 63 14.1 70
複数の列の中で 66 16 61 サポートされていません 53