Как сделать одинаковый отступ между элементами, но кроме краев контейнера?

(1 картинка)
У контейнера может меняться ширина. У элементов фиксированная ширина 75px, margin-left 20px. Как можно сделать, что бы элементы равномерно распределились?
ссылка на мою разметку:
https://jsfiddle.net/mefpu0k6/1/

Если делать через flex-wrap и space-between, то у последних элементов margin-left не такой как у всех (2 картинка)

А нужно сделать как на 3 картинке. Т.е margin-left у всех одинаковый
Мне удалось это сделать, но только с помощью js
`https://jsfiddle.net/u1yub2jq/2/`
Можно ли это сделать без помощи js? Или что делать с лишним пространством справа?
При этом, когда меняется ширина элементы переходят на новую строку.

Ответ

Не флексбоком единым. Есть ещё грид.
.container { display: grid; grid-template-columns: repeat(auto-fit, 75px); grid-gap: 20px; justify-content: space-between; width: 500px; border: 1px solid black; resize: horizontal; overflow: hidden; } .block { background-color: red; color: white; width: 75px; height: 75px; font: 20px sans-serif; line-height: 75px; text-align: center; }

1

2

3

4

5

6

7

8

Подробный разбор всех вариантов размещения ячеек с разнообразными выравниваниями можно найти в статье Красивое выравнивание блоков по резиновой сетке. По-новому