CSS Gridで要素を揃える方法

今回はCSS Gridの備忘録を投稿します。
前回の｢Flexboxで要素を揃える方法｣と比較しながら見ると面白いかもしれません。

1．デフォルト（左上寄せ）

div.grid-default {
  display: grid;
  height: 45px;
  grid-template-columns: 100px 100px 100px;
}

2．右寄せ

div.grid-right {
  display: grid;
  height: 37px;
  justify-content: right;
  grid-template-columns: 100px 100px 100px;
}

3．左右中央寄せ

div.grid-center-row {
  display: grid;
  height: 37px;
  justify-content: center;
  grid-template-columns: 100px 100px 100px;
}

4．等間隔配置

div.grid-gap-col {
  display: grid;
  height: 37px;
  grid-template-columns: 100px 100px 100px;
  justify-content: space-between;
}

5．両端スペース＆等間隔配置

div.grid-space-side {
  display: grid;
  height: 37px;
  grid-template-columns: 100px 100px 100px;
  justify-content: space-around;
}

6．上下中央寄せ

div.grid-all-center {
  list-style: none;
  display: grid;
  height: 60px;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: auto;
  grid-gap: 5px;
  justify-content: center;
  align-items:center;
}

以上、最後までお読みいただき、ありがとうございました！