CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのgrid-row-gapプロパティの使い方を徹底解説

CSSのgrid-row-gapプロパティとは

grid-row-gapプロパティは、CSSグリッドレイアウトにおいて、行と行の間の間隔（ギャップ）を指定するためのプロパティです。グリッドコンテナに適用することで、各行の間に任意のサイズの余白を設けることができ、カードレイアウトやギャラリーなど、要素を整列させたい場面で非常に便利です。

なお、現在のCSS仕様ではgrid-row-gapはrow-gapに置き換えられており、行と列の両方の間隔をまとめて指定できるgapプロパティの使用が推奨されています。ただし、古いブラウザとの互換性を考慮する場合には、grid-row-gapも引き続き利用できます。

grid-row-gapの使用例

以下のコードは、grid-row-gapプロパティを使って、グリッドの行間に20pxの間隔を設定する例です。実際にコードを実行して、表示結果を確認してみてください。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: green;
            grid-template-columns: auto auto;
            padding: 20px;
            grid-column-gap: 20px;
            grid-row-gap: 20px;
         }
         .ele {
            background-color: orange;
            border: 2px solid gray;
            padding: 35px;
            font-size: 30px;
            text-align: center;
         }
      </style>
   </head>
   <body>
      <h1>Game Board</h1>
      <div class = "container">
         <div class = "ele">1</div>
         <div class = "ele">2</div>
         <div class = "ele">3</div>
         <div class = "ele">4</div>
         <div class = "ele">5</div>
         <div class = "ele">6</div>
      </div>
   </body>
</html>

コードの解説

このサンプルでは、以下のような仕組みでグリッドレイアウトが構築されています。

  • display: grid … .containerクラスをグリッドコンテナとして定義します。
  • grid-template-columns: auto auto … 2列のグリッドを作成します。6つの要素が自動的に3行2列に配置されます。
  • grid-row-gap: 20px … 行と行の間に20pxの間隔を設定します。
  • grid-column-gap: 20px … 列と列の間にも20pxの間隔を設定します。

実行すると、緑色の背景のコンテナの中に、オレンジ色の要素が等間隔で並び、行間・列間それぞれに20pxの余白が設けられていることが確認できます。

まとめ

grid-row-gapプロパティを使えば、グリッドレイアウトの行間隔を簡単に調整できます。モダンな開発ではgapプロパティ一つで行・列両方の間隔を指定できるため、基本的にはgapの使用をおすすめしますが、仕組みを理解しておくと既存コードの保守にも役立ちます。

  1. CSSのgrid-column-startプロパティの使い方を解説

    CSSのgrid-column-startプロパティを使うと、グリッドアイテムがどの列から配置されるか（開始位置）を指定できます。グリッドレイアウトでアイテムの位置を細かく制御したい場合に非常に便利なプロパティです。grid-column-startプロパティとはgrid-column-startは、グリッドコンテナ内のアイテムの列方向の開始位置を決めるプロパティです。値にはグリッドラインの番号を指定します。例えば「2」を指定すると、アイテムは2番目のグリッドライン（つまり1列目と2列目の間の線）から配置されます。主な指定方法数値で指定： grid-column-start: 2; のように、

  2. CSSグリッドのgapプロパティで行と列の間隔を設定する方法

    CSS Gridレイアウトでは、gapプロパティ（旧称：grid-gap）を使うことで、グリッドの行と列の間に余白（ギャップ）を簡単に設定できます。マージンやパディングを個別に調整する必要がなく、レイアウト全体の間隔を一括で管理できるのが大きなメリットです。 gapプロパティの基本 gapプロパティには、次のように1つまたは2つの値を指定できます。 値が1つの場合： 行と列の両方に同じ間隔が適用されます（例：gap: 20px;） 値が2つの場合： 1つ目が行間（row-gap）、2つ目が列間（column-gap）になります（例：gap: 20px 20px;） なお、grid-gapは