【CSS】全体は中央寄せだけど子要素の並びは左寄せにしたい

Flexboxではできない

Flexboxの全体は中央寄せだけど、子要素の並びは左寄せにしたかったのですができませんでした。
justify-content: center;だと子要素は当然中央寄せに。
justify-content: flex-start;だと子要素は左寄せだけど、全体も左寄せになってしまいます...

結論

Flexboxを捨てて、Gridを使いましょう！！！！！！！！！

  display: grid;
  grid-template-columns: repeat(auto-fit, 220px);
  justify-content: center;
  grid-gap: 1rem;

CodePen