CSS gapプロパティ

インスタンス

グリッドの行と列の間のギャップを設定します：

.grid-container { gap: 50px; }

表内の数字は、そのプロパティをサポートする最初のブラウザバージョンを示します。

gap プロパティは、グリッドの行と列の間のギャップを設定するために使用され、row-gap と column-gap のショートハンド形式です。

注意：CSS グリッドレイアウトは、当初 grid-gap プロパティで定義されていましたが、現在は gap に徐々に置き換えられています。

gap: row-gap column-gap;

值	説明
row-gap	グリッドレイアウトの行間のギャップサイズを設定します
column-gap	グリッドレイアウトの列間のギャップサイズを設定します

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

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

CSS リファレンス：row-gapプロパティ

CSS リファレンス：column-gapプロパティ

その他の拡張