Как правильно сверстать такие блоки?

Question

[MadBliss]

Понимаю, что наверное элементарный вопрос, но я еще только учусь, don't bully me, пожалуйста.
Как сверстать такие блоки (два левых должны быть кликабельные ссылки), при добавлении текста у меня уезжает картинка. А если сделать абсолютное позиционирование, то как потом адаптив запилить?
(img-1 link: https://gamerteams.com/web/uploads/gallery/10000/1... )
(img-2 link: https://playvalorant.com/static/agents-group-539f9... )
P.S. В правом блоке можно ничего не писать, проблема только в двух левых

Answer 1

[Ankhena]

Гридами проще всего.
На мобилках в столбик, на десктопах как на макете.
https://jsfiddle.net/xjks3vgo/

Зачем там абсолюты - не поняла.

Comments

[MadBliss]

Спасибо!

Answer 2

[DrWeyber]

Вот примерно так, только не используйте фиксированные ширину/высоту, как это делал я, у вас будет контент внутри, регулируйте паддингами и марджинами.
https://codepen.io/DrWeyber/pen/MWeawxG - Мой код
https://frontender.info/a-guide-to-flexbox/ - Советую изучить флексы для такого дела ;)

Comments

[DrWeyber]

Можете взять мою сетку HTML, а стили написать свои, как душе угодно)

[MadBliss]

DrWeyber, Так проблема именно в засовывании картинки в блок, вместе с текстом, а не в вёрстке самой сетки :(

[Егор]

MadBliss, сделайте её как background, а с текстом там уже по желанию...

Answer 3

[ArtJH]

а в чем проблема в адаптиве?
1) Почитайте про flex box, использовать будете постоянно, да и будет яснее как делать адаптив
2) Картинку либо через img и абсолютом или через css background-image , также не забудьте им добавить max-width: 100%
Если есть еще вопросы, задавайте