CSSのrow-gapでグリッドやフレックスレイアウトの行間スペースを調整する方法をわかりやすく解説

2024.09.14
スポンサーリンク

row-gapプロパティは、グリッドレイアウトやフレックスボックスにおいて、行と行の間にスペースを指定するために使用されます。

スポンサーリンク

row-gapプロパティの値とその効果の一覧

  • row-gap: 10px; – 行間に10pxのスペースが追加されます。
  • row-gap: 30px; – 行間に30pxのスペースが追加されます。
  • row-gap: 50px; – 行間に50pxのスペースが追加されます。

注意点や関連情報

row-gapプロパティはgridやflexのコンテナに対して使用できます。
このプロパティを使うと、行間のスペースを明確に設定でき、要素同士の重なりを防ぐことができます。

row-gapが効かない時の原因と対策

親要素がgridやflexコンテナでない

row-gapプロパティは、gridやflexコンテナ内でのみ使用できます。親要素にdisplay: gridやdisplay: flexが設定されていないと、row-gapは機能しません。

対策: row-gapを使用したい要素の親にdisplay: gridまたはdisplay: flexを設定します。例えば、親要素にdisplay: grid;を指定することで、row-gapが有効になります。

grid-auto-rowsやgrid-template-rowsが固定されている

gridレイアウトの場合、grid-auto-rowsやgrid-template-rowsが固定されていると、グリッドの行間に余白ができないことがあります。これは、行の高さが制限されているためです。

対策: grid-auto-rowsやgrid-template-rowsの設定を確認し、行の高さが自動調整されるように変更します。例えば、grid-auto-rows: auto;やgrid-template-rows: repeat(auto-fill, minmax(100px, auto));のように設定します。

共通するCSSコード

.css-sample-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 80%;
      margin: 20px auto;
      padding: 20px;
      border: 2px solid #333;
      background-color: #f9f9f9;
    }

    .css-sample-box {
      background-color: #e0e0e0;
      padding: 20px;
      text-align: center;
    }

row-gap: 10px;

行間に10pxのスペースがある例です。

HTMLコード

<div class="css-sample-container css-sample-row-gap-10px">
      <div class="css-sample-box">Item 1</div>
      <div class="css-sample-box">Item 2</div>
      <div class="css-sample-box">Item 3</div>
      <div class="css-sample-box">Item 4</div>
    </div>

CSSコード

.css-sample-row-gap-10px {
      row-gap: 10px;
    }

表示結果

Item 1
Item 2
Item 3
Item 4

row-gap: 30px;

行間に30pxのスペースがある例です。

HTMLコード

<div class="css-sample-container css-sample-row-gap-30px">
      <div class="css-sample-box">Item 1</div>
      <div class="css-sample-box">Item 2</div>
      <div class="css-sample-box">Item 3</div>
      <div class="css-sample-box">Item 4</div>
    </div>

CSSコード

.css-sample-row-gap-30px {
      row-gap: 30px;
    }

表示結果

Item 1
Item 2
Item 3
Item 4

row-gap: 50px;

行間に50pxのスペースがある例です。

HTMLコード

<div class="css-sample-container css-sample-row-gap-50px">
      <div class="css-sample-box">Item 1</div>
      <div class="css-sample-box">Item 2</div>
      <div class="css-sample-box">Item 3</div>
      <div class="css-sample-box">Item 4</div>
    </div>

CSSコード

.css-sample-row-gap-50px {
      row-gap: 50px;
    }

表示結果

Item 1
Item 2
Item 3
Item 4

まとめ

  • row-gapプロパティは、グリッドやフレックスレイアウトにおける行間のスペースを指定します。
  • row-gap: 10px;では10pxの行間が追加されます。
  • row-gap: 30px;では30pxの行間が追加されます。
  • row-gap: 50px;では50pxの行間が追加されます。
スポンサーリンク