Как сделать grid сетку с разной шириной колонок в каждой строке?

Антон Антон, ну тут без разницы флекс или грид.

Именованные области тут не нужны и создавать каждому по классу тоже не нужно.

Достаточно задать класс тем элементам, которые должны занять по 2 колонки и прописать им
grid-column: span 2;

Сам грид можно сделать каким-то таким (буду считать, что gap = 20)
1fr 166px 1fr
или 547fx 1fr 547px
или вычислить пропорции и написать в fr все три столбца (пожалуй, лучший вариант для адаптива или чтобы обезопасить себя от желания клиента изменить ширину контейнера).

grid-template-rows вообще не нужно писать, высота контента в любой момент может измениться

Также это можно сделать и флексами. (Только не двумя как в ответе Антон Антон, а одним).

Какой вариант выбрать может зависеть от адаптива. Просто, чтобы поменьше писать при перестроении.

Как убрать отступы у сайта сверху справа и слева?

Михаил Лялин, мне, если честно, надоело отвечать на этот вопрос в 100500 раз. Поищите по ответам и комментариям, если действительно интересно.

Грубо говоря: так делать не нужно, потому что рано.
Потому что потом придется переопределять обратно, вместо того, чтобы сразу и одни раз задать нужные отступы.
Потому что при добавлении нового блока без дополнительного класса, в всё слипнется.
И т.д.

Как растянуть фон цифры на весь item?

frontAng, медленно: отмените центрирование для номеров.
https://developer.mozilla.org/ru/docs/Web/CSS/alig...

Как растянуть фон цифры на весь item?

frontAng, тогда нужно определиться:
- нужно центрировать
- нужно на всю высоту

Как растянуть фон цифры на весь item?

1. Используйте для номеров <ol> и псевдоэлементы с counter. Это семантичнее.
2. Стилизуйте как хотите.

Как растянуть фон цифры на весь item?

Не центрируйте элемент.

Как убрать отступы у сайта сверху справа и слева?

Поддерживаю Виталия

Как убрать отступы у сайта сверху справа и слева?

Нужно:
1. Открыть инструменты разработчика.
2. Выяснить откуда отступы.
3. Убрать их.

Если вы пришли на Тостер, чтобы узнать, что у body есть отступы по умолчанию, то это беда.

С чего начать изучение верстки?

но с каждым следующим своим шагом понимаю, что еще толком ничего не знаю

Это и не изменится, если будете продолжать изучение и развитие. Читайте мудрецов.

потому что элементарно не понимаю порядок действий по верстке сайта

Варианты могут быть разными.
Самый банальный: сверху вниз.
Можно от крупных блоков к мелким.
Можно от простых к сложным.
Можно соорудить свою удобную вам систему.

и с большим количеством практики

Телеграм-каналов с макетами сейчас сколько душа пожелает. Берете и верстаете. Пару десятков сверстаете - немного полегчает.

С чего начать изучение верстки?

Как думаете о какой логике и программе изучения верстки можно говорить человеку, который к этому вопросу прикрутил тег React??
Вот как? Как вы до этого дошли?

Почему объект не располагается горизонтально?

Какой объект? И что значит "объект располагается горизонтально"?

Если речь про список, то да, по умолчанию он располагается вертикально.
Чтобы он стал горизонтальным, нужно ему что-нибудь такое задать. Флексы, гриды, инлайн-блоки и т.д.

Как понять что твоя верстка приемлема?

Levott, как-то нет.

Почитайте про семантическую верстку.
Про теги для навигации, про списки.
Телефон - это ссылка. Зачем ему вокруг div не ясно. Если может быть больше телефонов или других контактных данных, то это секция или список или dl.

По спецификации div можно использовать тогда, когда нет других, более подходящих тегов. В вашем случае альтернатив полно.

Это <div class="card_circle">1</div> вообще псевдоэлементы от элементов нумерованного списка.

И т.д.

Как понять что твоя верстка приемлема?

Levott, куча лишних div, но черт с ними.
1. Но с какой целью вы одиночные кнопки оборачиваете в формы? А потом еще и в div. И они больше похожи на ссылки.
2. Зачем hr вместо section?
3. Снова про семантику (меню, цитаты (или что это там))
4. citatafirstmain_text_textsecond с названиями классов нужно что-то делать. И с их единообразием.
firstmain - первая или главная?
5. Классы типа white, orange до добра обычно не доводят.

Вот вариант критериев https://habr.com/ru/companies/htmlacademy/articles...

Как понять что твоя верстка приемлема?

Клиент принял её и оплатил.

Как натянуть верстку на FTP?

но нужно закинуть на фтп, как это сделать?

Получить у вашего хостера параметры для подключения (логин, пароль, сервер).
У него же прочитать инструкцию по подключению, если не умеете.

Обычно у приличных хостеров есть веб-интерфейс доступа к файлам. Можно через него.

Ошибка в css при отображении pagewindth в чём ошибка?

media="screen and (max-width:1023px)" 
media="screen and (min-width:1023.02px)"

Как называется такой список?

MrCard, такие поля как верстать?
Так и верстать input + label
Типа того https://qna.habr.com/q/1272730#answer_2319398

Как называется такой список?

Хотелось бы сначала узнать где на скрине дропдаун.

Хочу посмотреть как кто их верстает, а найти не могу :(

Сайт любой авиакомании или ж/д или автобусной или любого агрегатора по продаже билетов?

Ищите на codepen https://codepen.io/search/pens?q=dropdown
а также "custom select"

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

border-image
gradient
псевдо
svg
и т.д.

линии влево абсолютами либо гридами

Как избежать обрезания изображения выходящего из блока?

Please2334, если нужно, чтобы изображение выходило за пределы блока, очевидно, что это не его фон. Либо неверные размеры блока.

Можно:
- Увеличить блок, поставить паддинги
- Задать фон родителю
- Сделать псевдо и задать фон ему

еще что-нибудь

Как зафиксировать контейнер для строк в одном положении?

marsel81, боюсь, что хром обновляется автоматом. Я бы засомневалась в адекватности того, кто писал тз.

Но можете считать ширину на js.

Как зафиксировать контейнер для строк в одном положении?

Есть достойное объяснение зачем это делать флексами?

Есть <table> - чудесно подходит для табличных данных.
Есть display table и grid.