【CSS Modules】gap省略形プロパティの使い方

gapプロパティは、CSSのGridレイアウトやFlexboxレイアウトにおいて、アイテム（子要素）間の間隔（ギャップ）を保持するプロパティです。このプロパティは、行と列それぞれの間隔を一度に設定できるショートハンドプロパティとして機能します。

具体的には、レイアウト内の各アイテム間に配置される隙間をまとめて指定する際に使用されます。例えば、Gridレイアウトで作成した表形式のコンテナや、Flexboxで並べた要素グループにおいて、それら個々のアイテムが隣接するのではなく、適切な余白を持って配置されるように調整できます。

gapプロパティは、row-gap（行の間隔）とcolumn-gap（列の間隔）の二つの個別プロパティの値をまとめて設定します。値の指定方法は二通りあります。一つはgap: <値>;のように単一の値を指定する方法で、この場合、行と列の両方に同じ間隔が適用されます。もう一つはgap: <行の間隔> <列の間隔>;のように二つの値を指定する方法で、最初の値が行の間隔に、二番目の値が列の間隔にそれぞれ適用されます。

このプロパティを使用することで、異なる方向の間隔を個別に設定する手間を省き、より簡潔で効率的なスタイルシートの記述が可能になります。以前はgrid-gapという名称でGridレイアウト専用でしたが、現在ではFlexboxレイアウトにも適用可能となり、汎用性が高まっています。これにより、さまざまな現代的なレイアウトにおいて、アイテム間のスペース管理を柔軟に行うことができます。

Copy
1gap: 16px 24px;

引数なし

引数はありません

戻り値なし

戻り値はありません