【CSS】グリッドレイアウト、縦や横で要素の中央揃え方法

2018年3月31日CSSグリッドレイアウト

グリッドレイアウト(Grid Layout)で要素を中央揃えにする方法は「text-align: center」や「margin」での記述ではなく「justify-content: center」や「align-items:center」を指定します

「display:flex」などでも良く使う記述ですね

位置揃え指定なし

  • aaa
  • bbb
  • ccc

.sample1{
list-style: none;
display: grid;
height:100px;
grid-template-columns: 50px 50px 50px;
grid-template-rows: auto;
grid-gap: 5px;
background:#FFF9C4;
}

グリッドレイアウトによる横並びでの中央揃え

「justify-content」は主軸方向の位置揃えを定義しているて、サンプルでは横並びなので横での位置揃えに対応します

  • aaa
  • bbb
  • ccc

.sample2{
list-style: none;
display: grid;
height:100px;
grid-template-columns: 50px 50px 50px;
grid-template-rows: auto;
grid-gap: 5px;
background:#FFF9C4;
justify-content: center;
}

グリッドレイアウトによる縦の中央揃え

主軸が横の場合、縦は交差方向となります

交差方向での位置揃えは「align-items」を使用すれば中央揃えに対応できます

  • aaa
  • bbb
  • ccc

.sample3{
list-style: none;
display: grid;
height:100px;
grid-template-columns: 50px 50px 50px;
grid-template-rows: auto;
grid-gap: 5px;
background:#FFF9C4;
justify-content: center;
align-items:center;
}

中央揃えにならない場合

grid-template-columnsのrepeat()を使い「auto-fill」で指定していると中央揃えが反映されません

中央揃えにするには「auto-fill」の代わりに「auto-fit」を指定します

  • aaa
  • bbb
  • ccc

.sample4{
list-style: none;
display: grid;
height:100px;
grid-template-columns: repeat(auto-fit,50px);
grid-template-rows: auto;
grid-gap: 5px;
background:#FFF9C4;
justify-content: center;
align-items:center;
}

2018年3月31日CSSグリッドレイアウト

Posted by Yousuke.U