Как создать структуру из двух смещённых рядов карточек, выходящих за пределы экрана
Задача заключается в построении компоновки, где два ряда карточек визуально смещены относительно центра: один ряд смещается влево, другой - вправо. При этом оба ряда частично выходят за границы видимой области (вьюпорта), создавая динамичный и современный эффект.
Ключевые принципы реализации
Для корректного отображения такой структуры необходимо соблюсти несколько условий:
- Контейнер с overflow: Родительский контейнер должен иметь свойство
overflow: hidden. Это создаст "окно", за пределы которого будут выходить ряды карточек. - Использование Flexbox или Grid: Для выравнивания и позиционирования рядов рекомендуется использовать CSS Flexbox или CSS Grid. Это обеспечит контроль над направлением и смещением.
- Отрицательные отступы (margin): Основной приём для вывода рядов за пределы вьюпорта - применение отрицательных значений для свойства
margin-leftилиmargin-rightк каждому ряду. - Адаптивность: Структура должна корректно отображаться на разных устройствах. На мобильных устройствах смещение может уменьшаться или ряды могут перестраиваться в вертикальную колонку для удобства просмотра.
Примерная логика построения
1. Создайте основной контейнер (.container) с overflow: hidden и необходимой шириной.
2. Внутри разместите два дочерних блока-ряда (например, .row-left и .row-right).
3. Для ряда, смещаемого влево, задайте отрицательный margin-left (например, -50px).
4. Для ряда, смещаемого вправо, задайте отрицательный margin-right (например, -50px) или положительный margin-left.
5. Внутри каждого ряда расположите карточки, используя Flexbox для их горизонтального распределения.
6. Настройте медиазапросы (@media) для мобильных устройств. В них можно уменьшить значение отрицательных отступов или изменить направление осей на flex-direction: column.
Предоставленные скриншоты (для десктопа и мобильных) служат наглядным референсом для проверки итогового визуального соответствия задуманному дизайну на всех типах устройств.