Как сделать сдвиг однотипных объектов в HTML?

Question

[gene4000]

Обычно элементы идут подряд пока не закочится свободное место. После этого они начинаются с новой строчки от самого края, как и предыдущая строка. Как можно сделать сдвиг относительно предыдущей строки?
Хотелось бы иметь возможность просто выводить элементы одного типа подряд без допольнительных ухищрений. При этом было бы неплохо, если бы они "перескакивали" при изменении размеров внешнего контейнера (измении размера окна браузера), но это не обязательно.
Может быть кто-то встречался с такой задачей? Ощущение, что решение должно быть простым.

Пример на изображении.

Answer 1

[benderskiy]

Не очень понял суть вопроса.
Нужно подобное? codepen.io/benderskiy/pen/cpfbn

Comments

[gene4000]

Да. Только не размер блоков меняется, а отступ у некоторых.
Для картинки показанной на примере нужно только одно значение:
:nth-child(9n-3)
Но не работает при измении размеров контейнера.
А у вас вроде бы работает, но не пойму как.

[benderskiy]

Кажется, я понял. Вам необходимо сделать, чтобы в четных строках было на один элемент меньше, чем в нечетных и при этом элементы были бы выровнены по-центру.
Если я правильно понял, то средствами CSS этого добиться не возможно для переменного числа элементов в строке (т.е. при изменении размеров окна), поскольку в nth-child() вы пишете 9n-3 исходя из того, что у вас 5 элементов в нечетных строках + 4 в четных.
Но можно реализовать с помощью простого скрипта: codepen.io/benderskiy/pen/Iqefr

[gene4000]

Ну в общем да. Очень точно описано. Действительно, необходимо как-то отслеживать переход на новую строку, тогда было бы проще всего. Иначе только для фиксированной ширины.
За скрипт спасибо. Должен пригодиться.