CSS grid-gap 属性

定義と使用方法

grid-gap 属性は、グリッドレイアウト中の行と列の間隔のサイズを定義し、以下の属性の短縮属性です：

注意：この属性は CSS3 でリネームされました gap。

も参照してください：

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

CSS 参考マニュアル：grip-row-gap 属性

CSS 参考マニュアル：grip-column-gap 属性

インスタンス

例1

行と列の間隔を短縮して50ピクセルに設定します：

.grid-container {
  grid-gap: 50px;
}

自分で試してみてください

例2

行の間隔を20ピクセル、列の間隔を50ピクセルに設定します：

.grid-container {
  grid-gap: 20px 50px;
}

自分で試してみてください

CSS 语法

grid-gap: grid-row-gap grid-column-gap;

属性値

値 説明
grid-row-gap グリッドレイアウト中の行の間隔のサイズを設定します。デフォルト値は0です。
grid-column-gap 列の間隔のサイズを設定します。デフォルト値は0です。

技術的な詳細

デフォルト値： 0 0
継承： いいえ
アニメーション制作： サポート。参照してください：アニメーション関連属性。
バージョン： CSS Grid Layout Module Level 1
JavaScript 语法： object.style.gridGap="50px 100px"

ブラウザのサポート

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

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44