Правильная сетка CSS

Нужно сделать правильную сетку с помощью CSS и желательно Flexbox.
Вот так у меня выглядит сейчас:

Что тут не так:
Нижняя часть сетки не прижата к левому краю. Не изменяется расстояние между элементами.
Единственное, что тут правильно более менее, это то, что сетка размещается по центру блока. Но тут тоже свой подвох, нужно чтобы максимальная ширина левого и правого расстояния были 30-40px, а далее уже менялось расстояние между самими элементами сетки. Прошу помочь, а то уже куча вариантов попробовал.
Высота и ширина элемента сетки 100px и отступ 2px, максимальный отступ слева и справа от блока с сеткой элементов — 35px.

Ответ

Вам надо использовать display: inline-block для элементов и для контейнера присвоить text-align: justify;. Минимальное расстояние реализуется через padding
.container { padding: 2px; border: 3px solid #464646; background-color: #000; padding-left: 35px; padding-right: 35px; text-align: justify; } .container__item { display: inline-block; width: 100px; height: 100px; margin: 2px; background-color: #464646; }

Затем для последней строчки рассчитывайте отступы с помощью JavaScript при resize

UPDATE
Для того, чтобы не было отступов между элементами и в последней строке элементы выравнивались по левому краю оберните блок ещё одним:
.container { padding: 2px; border: 3px solid #464646; background-color: #000; padding-left: 35px; padding-right: 35px; display: flex; justify-content: center; } .wrapper-center { display: flex; flex-wrap: wrap; } .container__item { width: 100px; height: 100px; margin: 2px; background-color: #464646; }