Как сделать адаптивную сетку на гридах?

Иван,

чтобы было понимание

Это для этого всё в одинаковый красный цвет покрашено? ))))))) Оки )))
Фиксированная высота не приводит к пиксельперфект.

Как сделать адаптивную сетку на гридах?

У вас в верстке все размеры гридов (да еще и по высоте) в px, о какой адаптивности может идти речь?
https://habr.com/ru/company/edison/blog/344878/
и это еще https://medium.com/@stasonmars/%D0%BA%D0%B0%D0%BA-...

Обтекание текстом фиксированного блока?

Kovalsky, только "копия" должна быть span'ом.
Но даже в таком случае она может неудачно попасть внутрь другого тега.

Как сделать анимацию плавного появления блока?

Это прекрасно, только display не анимируется. Элемент не может быть уже немножко не none и уже чуть-чуть block.

Что лучше использовать в блочной верстке - margin или padding?

pihachu,

Почему логично?

Я не права, логика не при чем, конечно.
Точнее при чем, но не в том смысле ))) А вот в таком: плохо, когда каша. Хорошо, когда единообразно. По мере возможности, потому что макеты всякие попадаются.

Ну вот у меня, как я понял, схлопывания не происходит:

Скрины это прекрасно. Я тоже могу в фотошопе нарисовать блоки и их родителей. И ничего не схлопнется.
Есть свойства, которые отменяют схлопывание.
Но вы же только скрин показываете, а не код. (под словом код имеется в виду не сюда простыню, а ссылку на песочницу)

Как сделать что бы ссылка не перемещалась при наведении?

Как убрать смещение ссылок при увеличение жирности текста?

Как добавить текст для слайдера, чтобы они вместе переключались?

Вадим Пожар, либо поменять на фон либо абсолютным позиционированием.
p.s. тренерЫ, если это русский сайт.

Как добавить текст для слайдера, чтобы они вместе переключались?

Вадим Пожар, значит, вы его зафиксировали или добавили не туда.
Покажите код в песочнице или ссылку на сайт.

Как добавить текст для слайдера, чтобы они вместе переключались?

Внутрь кадра вставьте текст, в чем вопрос?

Как сделать анимацию плавного появления блока?

Менять ему прозрачность?

Не отображается рисунок svg в Опере, а в Мазиле все прекрасно отображается?

Нина, Но мы-то как узнаем что с ним не так, если вы не показываете код?

просто выделила в Фотошопе нужный слой, правой кнопкой - экспортировать как ... и выбрала .svg

Таким образом обычно получается png внутри типа svg. А не нормальный svg.

Что лучше использовать в блочной верстке - margin или padding?

pihachu,

для блоков понял - лучше использовать margin-top. Спасибо.

Господи, как?
Вы же сами тут где-то в комментариях к схлопыванию писали, что можно писать только один. Логично, что нижний, а не верхний.
Но разумным ответом был бы padding. Там же фон может быть, содержимое не должно прилипнуть к краю фона.

И для block, и для content можно задать и margin, и padding. Что бы выбрали - двигали главные блоки друг от друга или двигали бы content в блоке 2, тем самым получая тот же эффект?

Padding для блока и margin-bottom для дочерних, если их несколько.
Потому что margin вываливаются. И margin-top у дочернего не даст того же эффекта, как padding-top у родителя.
Смотрите: https://jsfiddle.net/nxqsupLh/
Задан margin-top дочернему блоку, но он оттолкнул не дочерний от зеленого родителя, а своего родителя от края окна.
Да, сейчас, в основном, флексы и у них нет схлопывания. Но нет никакой гарантии, что макет не поменяется и вместо флекса не будет просто блок. Тогда придется вспоминать "ах да, черт, еще отступы ведь надо поправить... так... а на что поменять?... ага... поменяли... ой, всё уехало... надо бы заново переверстать"

Что лучше использовать в блочной верстке - margin или padding?

pihachu,

если мы двигаем блоки, а не отступы между контентом и мы используем белый/прозрачный фон, мне кажется нет разницы, что использовать - padding-top или margin-top. Т.к. и margin и padding просто "расширит" верхнюю белую границу тем самым отодвинув блок.

Если же блок например с фоном (картинка/цвет), то используя margin для блока мы отодвинем блок+фон, а используя padding мы как бы расширим видимость фона.

Ага.
Теперь следующие аргументы:
1. мы хотим получить более или менее универсальное решение.
2. мы не знаем когда придет дизайнер и захочет перекрасить фон.

Что лучше использовать в блочной верстке - margin или padding?

pihachu,

да, я ж об этом и спрашиваю - отодвигать контент внутри блока или отодвигать блок?

Напишите аргументы за padding и за margin.

И контрольный в голову: в статьях что по этому поводу написано?

Что лучше использовать в блочной верстке - margin или padding?

pihachu,

Я как раз и пытаюсь всё сделать правильно по уму "здесь и сейчас", т.к. эту страницу потом можно дублировать под другие нужды, и не очень бы хотелось плодить ошибки, которые потом исправлять 3 года и 92 месяца.

Во-первых, по другому не бывает.
Во-вторых, для начала придется понять те статьи.

Что лучше использовать в блочной верстке - margin или padding?

pihachu,

тупо отодвигают контент внутри блока.

Вы знаете, padding именно для этого и нужен. Отодвигать контент внутри блока.

Что лучше использовать в блочной верстке - margin или padding?

pihachu, я даже не знаю, что к ним добавить.
Почитайте про БЭМ, подумайте как эти блоки можно переиспользовать в других местах или на других сайтах. Какие свойства они должны потащить за собой, а какие нет.
Не обязательно потом использовать БЭМ, но это дает представление о происходящем.

Можно упростить. Если это первая работа, то без разницы, просто для начала сделайте, чтобы совпадало с макетом. И так десяток-другой макетов. В процессе найдете закономерности, что часть блоков похожи друг на друга и хорошо бы их делать какими-то универсальными удобными для вас методами.
Потом почитайте кодгайды разных компаний, разные best practices и те статьи еще раз.
Со временем прояснится.

Что лучше использовать в блочной верстке - margin или padding?

Там в комментария ссылки на отличные статьи В каких единицах лучше делать отступы между блоками при вёрстке?

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

А экран вы каким образом уменьшаете? Колесиком мышки? Так это масштаб, а не размер окна.

Либо у вас текст задан в vw или что-нибудь в таком духе.

Давайте код или ссылку.

Не работает max-width в IE11?

Валерий Жмышенко, у меня да, попробуйте ;)