Как правильно верстать список элементов?

Question

[Alex Clear]

К примеру, есть такой вот список.

При большом разрешении ничего страшного, просто ставим margin ы всем, исключая последний элемент. Можно еще задать justify-content: space-between, однако тут есть свои нюансы, в которых и заключается суть вопроса.

Если я сделаю отступы margin ом, то когда перенесется последний элемент, у 4 элемента будет ненужный отступ, поэтому все элементы не будет центрироваться правильно. Не убирать же у каждого элемента при определенном разрешении этот злосчастный маргин. А что если поставить space-between? Тоже ничего хорошего. При переносе двух элементов, они просто разъезжаются по разным сторонам блока, а это выглядит, мягко говоря, плохо.
В общем, как решить такую задачу? Не нужно советовать гриды, ибо я и без этого знаю, что там gap, которые легко решает эту проблему. Мне нужно что-то другое.

Answer 1

[Dima Polos]

Сетка, колонки. Поищите smartgrid в YouTube. Если можно гриды - гриды юзайте.
Тот же бутстрап 4 возьмите, только сетку, она же grid, но не тот grid, который grid, а сетка, на флексах.

Answer 2

[sergski]

это так, если зададите каждому margin: 0 20px 0 0;
задайте margin: 0 10px;

Comments

[Alex Clear]

Но тогда получится, что они будут отталкивать от контейнера, а в макете они прилипают.

[sergski]

Alex Clear, я вам просто предложил отступ между элементами делать путем сложения марджинов слева и справа у элемента. сверху и снизу у них 0, о каком контейнере речь?