グリッドレイアウトで余白、隙間を設定する方法

はじめに

gridレイアウトでは個別の位置指定をしない限り、grid枠に従ってすきまなく順番に配置されます。
今回はgridレイアウトに余白を設定する方法をまとめてみました。

gridの基本はこちらにまとめてあるので、よかったら参考にしてください。
gridの使い方

gridレイアウトに余白を付ける

余白の付け方は簡単で、
横方向の余白はcolumn-gapプロパティ、縦方向にはrow-gapプロパティを使うだけです。

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

これでgridのそれぞれの隙間に余白を付けることができます。

また、gap:10px;のようにまとめて付けることもできます。

余白を細かく指定するときは下記の２つを使用します。

justify-content

justify-contentは、コンテナ内におけるグリッドの横方向（インライン軸）の位置を指定するプロパティです。

使える値は

start　　　　　　　左寄せ
center　　　　　　中央寄せ
end　　　　　　　右寄せ
stretch　　　　　　軸の領域いっぱいにグリッドを広げる
space-between　　均等配置 / 左右の余白無し
space-around　　　均等配置 / 左右の余白ありはアイテム間の半分
space-evenly　　　均等配置 / 左右の余白はアイテム間と同様

などがあります。

align-content

align-contentは、コンテナ内におけるグリッドの縦方向（ブロック軸）の位置を指定するプロパティです。

使える値は

start　　　　　　　上寄せ
center　　　　　　中央寄せ
end　　　　　　　下寄せ
stretch　　　　　　軸の領域いっぱいにグリッドを広げる
space-between 　　均等配置 / 上下の余白無し
space-around　　　均等配置 / 上下の余白ありはアイテム間の半分
space-evenly　　　均等配置 / 上下の余白はアイテム間と同様

などがあります。

おわり

gridはflexboxに比べてシンプルに作成できるのでぜひ使ってみてください。