【CSS Modules】row-gapプロパティの使い方
row-gapプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
row-gapプロパティは、CSSのレイアウトモジュール、特にグリッドレイアウトやフレックスレイアウトにおいて、行（row）間の間隔（ギャップ）を定義する値を保持するプロパティです。
このプロパティは、グリッドコンテナの行と行の間に視覚的なスペースを作成するために使用されます。以前はgrid-row-gapという名称でしたが、より汎用的に使用できるようにするため、row-gapとして名称が変更されました。
指定できる値は、pxやem、remなどの長さの単位、またはパーセンテージです。これらの値は、隣接するグリッドトラックの行の間に均一な間隔を設定します。負の値を指定することはできません。
row-gapプロパティは、CSS Gridレイアウトの他に、flex-directionプロパティがcolumnに設定されたFlexboxコンテナにも適用されます。これにより、縦方向に並んだフレックスアイテム間の間隔を制御することができます。ただし、コンテナの端と最初または最後のアイテムの間にはギャップは適用されません。
関連するプロパティとして、列間の間隔を定義するcolumn-gapプロパティがあります。また、row-gapとcolumn-gapの両方を一度に設定できるショートハンドプロパティとしてgapプロパティも存在します。これらのプロパティを適切に使用することで、複雑なレイアウトでも要素間の視覚的なバランスを容易に調整し、ユーザーインターフェースの見た目を向上させることができます。ウェブページの要素間の配置を細かく制御するために、システムエンジニアが頻繁に利用する重要なプロパティの一つです。
構文(syntax)
1.container { 2 row-gap: 10px; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません