Как сверстать такой блок?

Question

[webjun]

Как сверстать такой блок чтоб все было на своих местах и не скакало ?


У меня получается так:

Но все как-то не ровно, особенно .description. Как это исправить?
Ссылка на кодпен:
https://codepen.io/Webjun/pen/wvrwGdm

Comments

[Антон Литвиненко]

Не стыдно? Ану давай сам добивай, чуть чуть осталось

[vlog]

Рекомендую использовать display: flex;
Тогда будет всё ровно :)

[webjun]

Антон Литвиненко, стыдно)

[iBird Rose]

разная высота иконок так делает. решений куча. выбирай любое

[webjun]

iBird Rose, Буду благодарен за пример. Выходит это сделать на флексах а на гридах нет..

Answer 1

[MagicMight]

Для каждого блока .feature сделайте грид разметку с grid-template-rows: ...px ...px auto

Comments

[webjun]

Задал, с текстом все ок но стали плыть картинки влево

[MagicMight]

webjun, добавь в качестве заглушек на codepen картинки-то) а то не видно что едет

Answer 2

[Legal Adviser]

Стыдно наверное, но самое главное лень... ох... подрастающее поколение...