grid-row-gap

グリッドロウギャップ（グリッド）

意味グリッドアイテム間の行の隙間

grid-row-gapとは？

grid-row-gapプロパティは、CSSグリッドレイアウトで、グリッドアイテム間の行の隙間（ギャップ）を設定するために使用します。

grid-row-gapの具体的な使い方

グリッドの行間に隙間を設定する例

<style>
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20px;
  }
</style>

<div class='container'>
  グリッドアイテム間に20ピクセルの行の隙間が設定されています。
</div>

.containerクラスが適用された要素にグリッドレイアウトを設定し、2列のフレキシブルな幅を持つグリッドを作成しています。そして、grid-row-gapプロパティを使って、グリッドアイテム間の行の隙間を20ピクセルに設定しています。

grid-row-gapに関するよくある質問

Q. grid-row-gapと行の高さの違いは？

A. grid-row-gapは行と行の間の隙間を指定するのに対し、行の高さはgrid-template-rowsやgrid-auto-rowsで指定します。grid-row-gapは行の内容に影響を与えず、純粋に隙間のみを制御します。

Q. grid-row-gapの値を0にするとどうなる？

A. grid-row-gapの値を0にすると、行と行の間に隙間がなくなり、グリッドアイテムが縦方向に隙間なく配置されます。これは、隙間を明示的に削除したい場合に使用します。

Q. grid-row-gapの最新の代替プロパティは？

A. 最新のCSS仕様では、grid-row-gapの代わりにrow-gapプロパティを使用することが推奨されています。これはグリッドレイアウトだけでなく、フレックスボックスレイアウトでも使用できるより汎用的なプロパティです。

grid-row-gapが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのgrid-row-gapやgrid、justify-items、grid-template-columns、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。