Как выравнивать блоки по центру не сломав wrap?

Допустим есть блоки
.main { display: flex; flex-wrap: wrap; justify-content: flex-start; background: #fff; } .box { width: 170px; height: 130px; border-radius: 3px; border: dashed 2px rgba(0, 0, 0, 0.1); margin: 10px; }

Мне нужно чтобы последние блоки прижимались к левому краю, но при этом чтобы вся конструкция блоков была по центру, т.е. будто там указан justify-content: center
Можно задать фиксированную ширину, но проблема в том что .main резиновый.
На jsfiddle это хорошо видно.
Если уменьшать или увеличивать область отображения то будет работать warp, но при этом справа будет много свободного пространства

Ответ

.main { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill, 170px); max-width: 890px; margin: auto; justify-content: center; } .box { height: 130px; border-radius: 3px; border: dashed 2px rgba(0, 0, 0, 0.1); }