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

Question

[art-boy]

Помогите пожалуйста, как сверстать блоки таким способом? По возможности, на маленьких устройствах чтобы каждый блок был на всю ширину и одинаковую высоту. Цифрами указано, что блоки одинаковые

Comments

[Lynn «Кофеман»]

Выглядит как grid

[Brad9aga]

Алексей Тен, да хоть флексбокс

Answer 1

[Ivan Bogachev]

Comments

[Вадим Кот]

Ivan Bogachev, зачем мобильные устройства напрягать гридами, если на них блоки все равно идут друг под другом?
mobile-first не зря же придумали

https://codepen.io/web-tech/pen/qzeOyL

[Ivan Bogachev]

Вадим Кот,

зачем мобильные устройства напрягать гридами, если на них блоки все равно идут друг под другом?

Что-то я вопрос не понял. В моем примере в мобильной версии я ставлю display:block всему. Ну а в какую сторону писать (от мобильной версии или от десктопной) - это вопрос чисто ситуативный, в разных проектах бывает удобно делать как в одну сторону, так и в другую.

[Вадим Кот]

Ivan Bogachev,

В моем примере в мобильной версии я ставлю display:block всему.

В том то и вопрос, что display приходится переопределять для mobile. В обратном же случае гриды задаются только от 30em и более.

mobile-first стили для .my-grid для mobile

desktop-first стили для .my-grid для mobile

Answer 2

[Алекс Глебов]

Masonry, если гриды рано

Answer 3

[5h4dow]

https://tuhub.ru/posts/css-grid-complete-guide
https://developer.mozilla.org/en-US/docs/Web/CSS/C...
https://html5book.ru/css-grid/

Comments

[art-boy]

Спасибо! Только вторая ссылка не открывается