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

【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：両方をまとめて指定できるショートハンド

なお、現在のCSS仕様では column-gap・row-gap・gap という新しい名称が標準となっています。旧名称も主要ブラウザで引き続き動作しますが、新しく書くコードでは新名称の使用が推奨されます。

実装例

次の例では、6つの要素を持つグリッドコンテナに対して、列間ギャップを30px、行間ギャップを20pxに設定しています。3番目の要素は grid-column-end: span 2; を指定することで、2列分の幅を持たせています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            grid-auto-rows: 50px;
            grid-column-gap: 30px;
            grid-row-gap: 20px;
            background-color: #2E86C1;
            padding: 10px;
         }
         .container>div {
            background-color: #F2D7D5;
            text-align: center;
            padding:10px 0;
            font-size: 20px;
         }
         .ele3 {
            grid-column-end: span 2;
         }
      </style>
   </head>
   <body>
      <div class = "container">
         <div class = "ele1">1</div>
         <div class = "ele2">2</div>
         <div class = "ele3">3</div>
         <div class = "ele4">4</div>
         <div class = "ele5">5</div>
         <div class = "ele6">6</div>
      </div>
   </body>
</html>

コードのポイント

  • grid-column-gap: 30px; … 各列の間に30pxの隙間が生まれます。
  • grid-row-gap: 20px; … 各行の間に20pxの隙間が生まれます。
  • grid-auto-rows: 50px; … 暗黙的に作成される行の高さを50pxに揃えます。
  • .ele3 { grid-column-end: span 2; } … 3番目の要素を2列分にまたがるように配置します。

ブラウザで表示すると、青い背景のコンテナ内に淡いピンク色のブロックが並び、各ブロックの間に指定した通りの余白が確保されていることを確認できます。ギャップはあくまで「間隔」として扱われるため、背景色のあるコンテナでも隙間部分にはコンテナの背景が透けて見える点に注意しましょう。

  1. CSSのgrid-template-areasプロパティでグリッドレイアウト内の領域を設定する方法

    グリッドレイアウト内に名前付きの領域（エリア）を定義するには、grid-template-areas プロパティを使用します。このプロパティを使うと、グリッドコンテナ内の各セルに名前を割り当て、直感的かつ視覚的にレイアウトを設計できるようになります。 grid-template-areas の基本 まず、配置したい要素に対して grid-area プロパティで領域名を指定し、次にグリッドコンテナ側で grid-template-areas にその領域名とドット（.）を組み合わせてレイアウトを記述します。ドットは「空のセル」を表し、文字列の各行がグリッドの1行分に対応します。 実装例 以下の例で

  2. CSSのgrid-templateプロパティの使い方を徹底解説！行・列・エリアの一括設定方法

    grid-templateプロパティとは CSSのgrid-templateプロパティは、グリッドレイアウトにおける行数・列数・各エリア（領域）をまとめて指定できるショートハンドプロパティです。個別にgrid-template-rowsやgrid-template-columnsを設定する代わりに、このプロパティひとつでグリッド構造全体を簡潔に定義できます。 グリッドテンプレートを設定する際は、行と列の数を指定し、あわせてグリッドレイアウト内のエリアも定義します。 grid-templateの構文 grid-templateプロパティの書式は以下のとおりです。 grid-template: