CSSグリッドギャッププロパティ
例
行と列の間のギャップを50pxに設定します。
.grid-container {
grid-gap: 50px;
}
定義と使用法
このプロパティは、グリッドレイアウトの行とgrid-gap
列の間のギャップのサイズを定義し、次のプロパティの省略形のプロパティです。
注:このプロパティは、CSS3で名前が変更されました。
gap
デフォルト値: | 00 |
---|---|
遺伝性の: | いいえ |
アニメート可能: | はい。アニメート可能について読む |
バージョン: | CSSグリッドレイアウトモジュールレベル1 |
JavaScript構文: | object .style.gridGap = "50px 100px" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
grid-gap | 57 | 16 | 52 | 10 | 44 |
CSS構文
grid-gap: grid-row-gap grid-column-gap;
プロパティ値
Value | Description | Play it |
---|---|---|
grid-row-gap | Sets the size of the gap between the rows in a grid layout. 0 is the default value | |
grid-column-gap | Sets the size of the gap between the columns in a grid layout. 0 is the default value |
その他の例
例
行間のギャップを20pxに設定し、列間のギャップを50pxに設定します。
.grid-container {
grid-gap: 20px 50px;
}
関連ページ
CSSチュートリアル:CSSグリッドレイアウト
CSSリファレンス:grid-row-gapプロパティ
CSSリファレンス:grid-column-gapプロパティ