@TeslaGogol

Как с помощью css располагать так блоки?

Цифрами обозначил порядок в div html, нужно именно в таком порядке

5d67010c474cd747780919.jpeg
  • Вопрос задан
  • 1564 просмотра
Пригласить эксперта
Ответы на вопрос 8
origami1024
@origami1024
went out for a night walk
1) flex-direction: column
2) flex-wrap: wrap
3) order 2му и 3му поменять местами

https://codepen.io/origami1024/pen/QWLgKWG
Ответ написан
@DavidAngelo
Вот здесь подборка разных раскладок на флексах. Ссылка на раздел с masonry
https://tobiasahlin.com/blog/common-flexbox-patter...

И подробнее конкретно о мозаике:
https://tobiasahlin.com/blog/masonry-with-css/

Но, опять же с оговоркой: если будет сильная разница в наполнении блоков, то порядок может поехать.
Ответ написан
@abi7project
Перепробовал несколько скриптов для своего проекта. Все забраковал. Для небольшой ленты нормально, для бесконечной не годится. Ресурсы прокрученных вверх блоков не освобождаются и вскоре начинаются дикие тормоза. Пришлось писать самому на js + css. Адовая работа, до сих пор временами баги нахожу. Результат можно посмотреть здесь:
https://www.zombler.com/explore/
Ответ написан
xakplant
@xakplant
Автор сайта xakplant.ru
Добавить к блокам float:left
Ответ написан
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Тыщу раз уже задавали этот вопрос.
В тысяча первый отвечаю: такая раскладка не реализуется средствами css. Используйте скрипт masonry.js.

То, что показал Рома Зварич, - это частные случаи, не приемлемые для боевого использования. Просто попробуйте изменить размеры блоков и все посыпется.
Ответ написан
@Vaultboy84
Masonry, как уже тут писали самый адекватный вариант. Все остальное посредством сиэсэс это костыли. А гриды еще и использовать рано.
Ответ написан
Ваш ответ на вопрос

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

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