Как реализовать на флоатах такое?

Question

[j-muse]

Делаю тестовое задание нужно на флоатах без JS реализовать. Я сделала состояние для первого экрана, а адаптив просто не представляю как можно чисто на флоатах и без кода сделать. Сдавать его уже не буду, просто интересно возможно ли его сделать и как это будет выглядеть.

1280:
prntscr.com/hkgraf

768:
prntscr.com/hkgrn5

Для мобильных сказали что можно использовать флексы и ордер.
320:
prntscr.com/hkgrs3

Comments

[sim3x]

Картинки загрузите на хабрасторадж

Спасибо

[Ankhena]

Как-то так:
https://jsfiddle.net/f0hLjhL2/
в размеры и отступы мне не хочется играть

С флексами есть вопросы? Там вроде без фокусов всё.

Answer 1

[freeman0204]

Очень похоже на это https://masonry.desandro.com/
А вообще по моему работодатель, дятел) С такими тестовыми заданиями и условиями посылайте их на**й.

Answer 2

[Hyubert]

просто интересно возможно ли его сделать и как это будет выглядеть

как вариант, адаптация только на 768, и очень грубо написано.

Comments

[Froggyweb]

Шестой блок почему то последний в разметке.

Вообще это хрень какая-то. Без JS здесь никак Да и с ним логика перестройки блоков не очень понятна либо только для конкретной последовательности. Короче какой-то конь в ваккуме :)

[Hyubert]

Froggyweb, не понял, ну последный он, отображаеться так как на дизайне, в чем проблема?
ЗЫ. для флоатов нет ордера.

[SOKR]

Hyubert, а вы не будете очень сильно сердиться за мой костыль,
который присобачен к вашему коду https://codepen.io/diadiafiodor/pen/gXNerx?editors=1100

[Hyubert]

SOKR, форкните, и делайте с ним что хотите.

Answer 3

[SOKR]

Если костыль - вариант то вот https://codepen.io/diadiafiodor/pen/gXNerx?editors=1100

Answer 4

[Immortal_pony]

Как-то так: findmuseum.today