Как сверстать это?

Question

[tlkna168]

Прошу помощи. Я новичок, учусь делать отзывчивую верстку. Как лучше сверстать это? Чтобы было ровно по вертикали и горизонтали, примерно так как на скриншоте ниже? Пытался флексами, но безуспешно. Блоки слетают. Можно пример кода? Надеюсь на помощь.

Вот что я пытаюсь сделать:

И вот что пока получилось:
codepen

Answer 1

[eternalfire]

был близок
https://codepen.io/anon/pen/qovvqo

Comments

[tlkna168]

Спасибо огромнейшее за помощь! Именно так как я задумывал, но к сожалению не смог.

[eternalfire]

tlkna168, на будущее, не пытайтесь изобретать велосипеды, юзайте css фреймворки bootstrap4 например, там всё это есть, bootstrap4 просто восхитителен, увеличивает скорость вёрстки во много раз, просто нужно изучить его

[eternalfire]

tlkna168, а вот и гайд
bootstrap-4.ru/docs/4.0/getting-started/introduction

[tlkna168]

Еще раз спасибо, буду изучать!

[NaN]

eternalfire, не для всех проектов нужен бутстрап.

Answer 2

[Данил]

Посмотрел код. Все очень плохо. Могу посоветовать пройти этот самоучитель

Comments

[Иван]

Он же древний как говно мамонта ...

[tlkna168]

Согласен, всё даже более чем плохо. Но многие опытные программисты в сети советовали начать с практики, а по мере поступления вопросов - задавать их, поэтому я решил попробовать

[Данил]

tlkna168, Вы хотите красить гаражи. Пришли к опытному маляру и он вам посоветовал начать красить и в ходе дела задавать вопросы. Но вы даже некогда не видели как красят гаражи и не знаете с какой стороны держать кисточку. Нагуглите вебинар на подобии этого, посмотрите его. Это даст пользу. Рандомный код из ответа тут – наврятле.