@Minion_Bob

Как отсортировать плитки разной ширины в CSS с помощью flex?

Стоит следующая задача - на главной странице есть спецпредложения в виде плитки в 3 столбца. Ширина плитки может быть 1 столбец и 2 столбца, высота всегда одинаковая для всех. Предложения отсортированы по дате начала. Возникла следующая проблема - если попадаются подряд 2 плитки с двойным размером, происходит перенос без заполнения пустого места.

Вот как выглядит идеальный вариант:

5dae2a68d1b18590065889.png
А вот как реальный:

5dae2a8a3be85909979981.png
Возможно ли как то решить данную задачу, без использования JS и masonry-подобным библиотекам?

По сути тут задача типа "проблема рюкзака", но там стоит цель оптимально заполнить, а у меня стоит цель сохранить сортировку по дате.

.gallery {
    display: flex;
    flex-flow: row wrap;
}

.gallery a {    
    margin: 10px;
    height: 100px;
    width: calc( (100% / 3) - 20px );
    padding: 10px;
}

.gallery a.double {
    width: calc( ( ( 100% / 3 ) * 2) - 20px );
}
  • Вопрос задан
  • 202 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы