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

Question

[Minion_Bob]

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

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


А вот как реальный:


Возможно ли как то решить данную задачу, без использования 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 );
}

Comments

[Rustam Bainazarov]

Навряд ли получится универсально. Можете играться с flex-grow для одинарных блоков. Скорее всего удастся таким макаром решить только какой-нибудь частный случай проблемы.

Да и то, с учётом вложения элементов в одного родителя, сомневаюсь, что вообще что-то годное выйдет.

[Minion_Bob]

Flex-grow, если не изменяет память, растянет блок, а мне этого делать нельзя. Я могу отсортировать элементы по дате, это не проблема, но как сделать так, чтобы свободное место было заполнено? Например перенести туда ближайший по размеру элемент, который "перескочит" через дату.

[Rustam Bainazarov]

Minion_Bob, а, коли именно сортировка, тогда это не к CSS вообще. Исключительно JS. Да и то, кстати.

Вы можете через nth-child задавать размеры с повторением, чтобы они всегда заполняли сетку по заранее подготовленному варианту. Но тогда вам что-то будет нужно думать насчёт универсального фона для элементов.

В целом, даже автоматическое распределение через JS а-ля Masonry вам не доступно, ибо оно будет ломать сортировку по дате.

С учётом всех представленных параметров, я не вижу решения проблемы. Кроме как либо учитывать дизайнерами, какие блоки шли до этого, чтобы не делать два широких блока подряд, либо делать универсальный фон + размеры на nth-child с повторением.

[Minion_Bob]

Рустам Байназаров, хорошо, если отбросить сортировку и сфокусироваться только на flex - есть решение по заполнению всей строки без изменения размера блока?

[Rustam Bainazarov]

Minion_Bob, нет, конечно же.

[SagePtr]

Если ширина 3 блока, а у вас будет 5 блоков по 2 - то вы их никак в эту сетку не впишете (без поворотов на 90 градусов).
Так что в общем случае, идея неудачна.
Разве что генерировать ширины блоков так, чтобы блоки шириной в 2 никогда не попадали на стык (но тогда блоки придётся добавлять только порциями по 3, или по 1 широкому 1 узкому).