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