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

Question

art-boy @art-boy

Дизайнер пытающийся верстать

HTML
CSS

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

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

Вопрос задан более трёх лет назад
189 просмотров

2 комментария

Подписаться 2 Сложный 2 комментария

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Frontend-разработчик: тариф PRO

10 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию + ИИ

6 месяцев

Далее

Решения вопроса 1

3 комментария

Вадим Кот @vadimkot Куратор тега CSS

Ivan Bogachev, зачем мобильные устройства напрягать гридами, если на них блоки все равно идут друг под другом?
mobile-first не зря же придумали
snippet
https://codepen.io/web-tech/pen/qzeOyL

Написано более трёх лет назад
Ivan Bogachev @sfi0zy Куратор тега CSS

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

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

Написано более трёх лет назад
Вадим Кот @vadimkot Куратор тега CSS

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

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

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

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

Написано более трёх лет назад