Как сделать такую структуру блоков?

Question

[bismoney]

Ребята... помогите.
Постараюсь объяснить. К примеру на сайте есть два вида блоков.


Как вы видите на картинке блоки идут подряд 1,2,3,4,5
К примеру блок 3 стал в ширину как две обычные, и вверху получилось пустое место.
Как сделать так что бы в таких случаях блок 4 перемешался на пустое место.

masonry
isotop
Это все понятно. Как то это делается без этого?

Можно js css jquery как?

Answer 1

[Алексей Зуев]

Если есть блоки двух типов (w и 2w) и надо выстроить их по 4 в строку, то можно итерационно заполнять строки до 4, учитывая, что двойной блок плюсует 2.
Если в строке получается больше 4, то ищем из последующих тот, который поможет нам заполнить пробел. Потом маленько магии по смене элементов. Ну и возвращаемся к концу заполненной строки и заполняем следующие аналогичным образом.
К примеру, можно набросать примерно такую сетку.

Comments

[bismoney]

Забыл поблагодарить вчера, доработав чуток ваши наброски сделал готовое решение для себя. Огромное вам спасибо.

Answer 2

[whitysolo]

недавно была подобная задача. на css не получилось сделать. пришлось делал на уровне кода, т.к. там мог отследить сколько занимает блок по ширине (через свойство), но у меня была проблема что там баннерная сетка должна была быть жёстко фиксирована в этих блоках. Можно попробовать ещё через js сделать.

Comments

[bismoney]

Понятно что как-то можно в коде и js, но как? вообще не смог найти примеры в гугле

[whitysolo]

4 блока в ряд должны поместиться? обходите все в цикле если на месте 4 в ряде стоит широкий, то меняете ищите следующий узкий и меняете их местами. мне было проще. заказщик разграничил так блоки, между большими должен быть хотя бы 1 узкий.

Answer 3

[Дима Паутов]

Вы хотите сделать умный css что ли? Вы сами перечислили библиотеки, которые делают то, что вам нужно!
Их поэтому и создали, т.к. css не может решить такую задачу.

Comments

[bismoney]

Вы дублируете ответы которые уже были, вопрос НЕ только в css, я сказал ПОМОЕМУ.

Answer 4

[Кирилл]

Если на CSS, то в голову приходит только flexbox.

Answer 5

[inDeepCode]

просто CSS'ом никак.

Answer 6

[Александр Таратин]

Через css только столбиками
w3bits.com/css-masonry