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;
}

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

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