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

参考サイト：https://zenn.dev/kibe/articles/f093495a22b88c