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プロパティに１つしか値を指定しない場合は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;
例２・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の基本レイアウトその２」をご覧ください。
最後に色々織り交ぜたサンプル掲載しておきます。文末に個々の解説つき。
See the Pen grid-layout-sample by Takashi Abe (@TakeshiAbe) on CodePen.
