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

CSSグリッドのギャップ（間隔）サイズを調整する方法

CSSグリッドレイアウトでアイテム同士の間隔（ギャップ）を調整するには、grid-column-gap、grid-row-gap、grid-gap のいずれかのプロパティを使用します。それぞれ、列方向のギャップ、行方向のギャップ、そして両方を一括して設定できます。

grid-column-gapプロパティ（列間のギャップ）

グリッドの列と列の間にギャップを設定します。次のコードでは、20pxの列間隔を指定しています。実際にブラウザで実行して、表示を確認してみてください。

コード例

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: green;
            grid-template-columns: auto auto;
            padding: 20px;
            grid-column-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>

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>

grid-gapプロパティ（行・列両方のギャップを一括指定）

grid-gapは、行と列のギャップをまとめて指定できるショートハンド（省略形）プロパティです。「grid-gap: 20px 20px;」のように記述すると、1つ目の値が行間（row-gap）、2つ目の値が列間（column-gap）に適用されます。値が1つだけの場合は、行・列の両方に同じ値が適用されます。

コード例

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: green;
            grid-template-columns: auto auto;
            padding: 20px;
            grid-gap: 20px 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>

補足：現在の標準仕様について

なお、これらのプロパティは現在のCSS仕様では row-gap、column-gap、gap という名称に統一されています。古いブラウザとの互換性を考慮する必要がある場合を除き、新しい名称での記述が推奨されています。

  1. CSSグリッドで行間のギャップサイズを指定する方法（grid-row-gapの使い方）

    CSSグリッドレイアウトにおいて、行と行の間隔（ギャップ）を調整するには、grid-row-gapプロパティを使用します。このプロパティに任意の長さの値（px、em、%など）を指定することで、行間のスペースを自由にコントロールできます。 grid-row-gapの基本的な使い方 以下の例では、コンテナにdisplay: grid;を指定してグリッドレイアウトを作成し、grid-row-gap: 50px;によって行間に50pxのギャップを設定しています。あわせてgrid-column-gapで列間にも30pxの間隔を設けています。 サンプルコード <!DOCTYPE html>

  2. 【CSS】grid-column-gapでグリッドの列間ギャップを設定する方法

    CSSグリッドレイアウトで列と列の間に余白を空けたい場合は、grid-column-gapプロパティを使用します。値を1つ指定するだけで、すべての列の間に均等なギャップが生成されるため、カード型レイアウトやギャラリー表示など、さまざまな場面で活躍します。 grid-column-gapの基本 grid-column-gapは、グリッドコンテナ内の列トラック同士の間隔を指定するためのプロパティです。px、em、rem、%など、おなじみの長さの単位を使用できます。 grid-column-gap：列と列の間隔を設定 grid-row-gap：行と行の間隔を設定 grid-gap：両方をまとめて