Распечатать на листочке.
Нарисовать поверх маркером сетку.
Понять сколько получилось строк и столбцов.
Понять сколько строк и столбцов занимает каждый элемент.
Перевести с русского на css.
Листочек можно заменить на любой графический редактор.
Уточните, что именно у вас не получилось?
Ваш код можно выложить в песочницу на jsfiddle.net
Именно в этом случае гриды не нужны. Гораздо разумнее и семантичнее разбить на два блока внутри одного общего и в общем блоке флексами расположить два блока горизонтально
Простой
