Gridレイアウトの余白・間隔のとり方

gridレイアウトの余白を設定

gridレイアウトではgrid-column・grid-row、またはgrid-areaプロパティをつかった個別の位置指定をしない限り、grid枠に従ってすきまなく順番に配置されます。

今回はgridレイアウトに余白、間隔を設定する方法です。

gridレイアウトに余白を設定する

余白の設定は非常にシンプルです。
横方向の余白はcolumn-gapプロパティ、縦方向にはrow-gapプロパティを使うのみ。

#{
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 column-gap: 10px;
 row-gap: 30px;
}
 
 
 
 
 

リスト表示などシンプルなレイアウトであれば、column-gap・row-gapで十分こと足りると思います。古いブラウザへの対応を考えるなら、それぞれgrid-column-gap , grid-row-gap での指定も併記しておく方が良いでしょう。

一括で指定したい場合は、gapプロパティ(旧名:grid-gap)を使い、空白区切りでrow-gap 、column-gapの順に指定します。

gapプロパティに1つしか値を指定しない場合はrow columnともに同じ値が適用されます。

#{
 gap:30px;  
 /* row-gap:30px; column-gap:30px;  と同義*/
}

余談ですが、これらのgapプロパティはgridレイアウトでもflexレイアウトでも使用できます(*注)が、段組みレイアウト(multi column layout)では、column-gap のみ有効ですので混同しないように注意しましょう。

(* iOS safariでは、flexレイアウトでgapプロパティを使うとエラーになるバグが確認されています)

グリッドアイテムの間隔のとり方を設定

gridレイアウトの間隔のとり方はflexレイアウトと99%同じです。

justify-content・align-content

グリッドアイテムそのものの配置(間隔のとり方)は、水平方向:justify-content、垂直方向:align-contentでとります。

例・justify-content:end;

 
 
 

例2・align-content: center;

 
 
 

* align-content は、グリッドコンテナのheightよりも、アイテムの高さが小さいときに有効です。コンテナの高さが未指定・自動の場合は無効な値となります。

justify-content・align-contentでとれる値

start開始位置(初期値)
center中央寄せ
end終了位置
space-between等間隔配置。両端の外側に余白なし
space-around等間隔配置。両端の外側は半分の余白
space-evenly等間隔配置。両端の外側も等しく余白

justify-self・align-item・salign-self

グリッドアイテム内の配置についてはjustify-self(水平方向)、align-items (垂直方向)で指定します。
align-itemsを個別で、違う値を指定する場合は、align-selfを使います。

justify-self・align-itemsでとれる値

start開始位置
center中央
end終了位置

gridレイアウトの余白・間隔まとめ

flexレイアウトとgridレイアウト、それぞれの余白・間隔設定の違いは「flex-start」、「flex-end」の代わりに「start」「end」を使うぐらいです。

flexレイアウトを知っていれば何の問題もないので、詳しい説明は「flexの基本レイアウト」・「flexの基本レイアウトその2」をご覧ください。

 
最後に色々織り交ぜたサンプル掲載しておきます。文末に個々の解説つき。

See the Pen grid-layout-sample by Takashi Abe (@TakeshiAbe) on CodePen.

上のサンプルの解説

  • width 560px、 height 400pxコンテナの中にGridコンテナがあります。
  • justify-content:center 、align-content: center で中央配置になっています。
  • grid-template-columnsとgrid-template-rowsで、120px3列、120px2行のグリッド枠(点線で囲んだ枠)。アイテムは80pxの正方形なので枠内に余白がある
  • row-gapで行間に10pxの余白
  • align-items: end なので、アイテムは枠の底辺に配置されています。
  • 1つ目のアイテムは個別指定なし。
  • 2つ目のアイテムはjustify-self:end で、グリッド枠の中で右寄せ
  • 3つ目のアイテムはmargin-left :100%。アイテムサイズではなく、grid枠サイズに対して100%移動する。
  • 4つ目のアイテムは、align-self: start で枠内の最上部に配置
  • 5つ目のアイテムは、justify-self align-self 両方にcenter指定で中央寄せ。

タイトルとURLをコピーしました