【CSS】「grid」便利な使い方、flexボックスでjustify-content: center;だけど子要素は左寄せにしたい場合
↑下の行を左寄せにしたい
display: grid;
display: flex;ではなくdisplay: grid;にする
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, 80px);
justify-content: center;
max-width: 400px;
grid-gap: 30px;
background: #f2f2f2;
padding: 8px;
}レスポンシブデザインを再現
grid-template-columns: repeat(auto-fit, minmax(40px, 1fr);
display: flex;ではなくdisplay: grid;にする
.grid2 {
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr);
justify-content: center;
grid-gap: 30px;
background: #f2f2f2;
padding: 8px;
}
