Как создать карточки в рядах со смещением?

Question

[Alina1984]

Приветствую.
Объясните пожалуйста как построить такую структуру карточек, которая состоит из 2 рядов.
Ряды смещаются: один в лево, один в право.
При этом обое выходят за пределы вьюпотра.

Скрины приложены как структура выгледяет на дестоп и как на мобильных

Comments

[Ankhena]

Это же слайдеры, наверное?
Делаете на целое число слайдов и чуть большую ширину. Сдвигаете. Обрезаете.
Либо указываете нецелое число слайдов.

[Александр Васильев]

Добавить что-то в ряд для сдвига?

Answer 1

[Николай]

не совсем понятно
1- Если у вас слайдер, именно идет скролл, то, выбираете сдвиг первого изображения на 50% , визуально видно, что там так и есть
2- Если это статично, делаете сетку, грид, размечая, сколько у вас колонок и по высоте и по ширине, у первой колонки и последней, можете сделать сдвиг, тогда, пересчет будет как вам нужно.

Но, вопрос требует уточнений, что именно вы хотите, что за изображения, нужно, чтобы они были оазличными, или же, это просто одно изображение, в виде картинки, которое повторяется с учетом строк ?

Answer 2

[Vefolio]

Можно сделать через flex и transform, задав двум рядам разное смещение (один влево, другой вправо) и ширину больше вьюпорта, например width: calc(100% + 40vw).
Готовый пример с адаптивом и JS-анимацией я подробно разобрал тут Как сделать два смещённых ряда карточек с выходом ...