Алексей

Именно в этом случае гриды не нужны. Гораздо разумнее и семантичнее разбить на два блока внутри одного общего и в общем блоке флексами расположить два блока горизонтально

Первый вариант совершенно не читабелен и ему есть альтернатива в виде верстки js (2 вариант), но с ним проще генерировать virtual Dom (привет реакт)

Второй вариант удобен тем что есть возможность сразу и наглядно подставлять данные и генерировать блоки верстки, при этом не засоряя Dom ни лишними блоками ни лишними слушателями. Сложнее создать virtual Dom, т.к нужно много парсить

Третий вариант Засоряет все и вся блоками, слушателями и вообще медленный

просто вместо pt пишите px. тогда будет полное соответствие макету.

pt - одна точка при печати. На мониторе она равна 1 физическому пикселю

Не смотря на то что css - это каскадная таблица стилей, этот самый каскад рекомендуется использовать по минимуму. Ознакомьтесь с методологией БЭМ или стилевыми модулями.

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

Не делать вложенный блок абсолютным. Либо получать его размеры через js и применять их для обертки

Флексы и background-size: contain