Как составить нестандартную сетку?

Question

[Aitd]

Приветствую всех. Поступило необычное предложение составить сетку для вывода изображений в нестандартном формате. Хочется решить всё это дело только средствами css.
В таком:


Пример - https://jsfiddle.net/h0fb7tqp/1/ текущей работы воспаленного сознания (дел особых с css не имел)

P.s. Для случая упрощения (если исходная проблема слишком сложна) возможен вариант 2:
Когда первые 7 ( до второго большого) в текущей реализации на jsfiddle идут правильно и нужно чтобы 14 картинка была справа, с 8 по 13 обтекали её слева, также как со 2 по 7 обтекает картинку номер 1.

С помощью nth-child не получается придумать правильный алгоритм
Возможно использование sass

Answer 1

[Aleksey Chernikov]

https://jsfiddle.net/st6u3hms/

Comments

[Aitd]

Спасибо за попытку, однако во-первых сетка порвалась, т.е появились пустоты, во-вторых 14 фотка находится под 8 9 10, а должна под 5 6 7

[Aleksey Chernikov]

Aitd, Если убрать отступы, пустот не будет. Так как вы написали - не получится. Или юзать либу, что написали выше, либо masonry. Что в целом одно и то же.

Можно попробовать подобное, но на флексах. С помощью Order получится изменить положение блоков. Но это тоже так себе вариант.

[Aitd]

Да с отступами разобрался.
По сути вы помогли сделать тот вариант что отмечен альтернативой (п.2), что вполне достаточно для решения задачи. (единственно пришлось для 12 и 13 элемента указать :nth-child(12n) { float:right } и получилось как надо

Спасибо!

Answer 2

[Exploding]

Может лучше вот это юзайте?https://packery.metafizzy.co и время сэкономить можно

Comments

[Aitd]

Я конечно попробую (если будет совсем безысходность), но это может не подойти, так как изначально задумывается некий доп функционал для этой сетки, который может привести к дополнительному времени и проблемам и изначальная постановка желательна без использования js

В любом случае спасибо за совет, пригодится точно, но в рамках задачи хочется решить без js

Answer 3

[Сергей delphinpro]

https://codepen.io/delphinpro/pen/BWJEgG

только вам придется немного доработать под себя. но там не сложно.