Как отловить размер изображения и позиционировать на нем объекты?

deniskins23, если мало точек и простая адаптация, то можно классами, снова без js

Как отловить размер изображения и позиционировать на нем объекты?

deniskins23, js для тултипов. Сами кружки не вижу смысла позиционировать на js.

Как отловить размер изображения и позиционировать на нем объекты?

deniskins23,

Вот на примере одной точки
https://jsfiddle.net/xuh1wac8/
размер специально чуть меньше для наглядности, сами посчитайте нужный

Товарищи, как сверстать такой блок?

svg можно оставить только для кривой
круги и CSS'ом не плохо делаются
а дальше абсолюты и значения в %

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

Например, градиентом https://jsfiddle.net/m0g8dtv6/
Или трансформацией и обратной трансформацией.
Или блок + треугольный псевдоэлемент (бордером, градиентом).
Или еще чем-нибудь.

Как сделать плавный переход?

MamaLuyba,

либо смотри template-areas грида, раз он пустые блоки оставляет

Не поможет, они не пустые

order поможет либо display: none с задержкой

Как сделать плавный переход?

Артур Кудашев,

мне нужно также

С таким подходом на фриланс.

но у меня не работает

Если к этому еще добавить "вот мой неработающий код: ссылка, хелп ми плиз", есть шансы на получение помощи.

В теории: делать через keyframes и в конце менять order на последний.

Как сделать плавный переход?

У работы есть анимация и она плавно пропадает и другие работы занимают ее место, но это происходит резко.

Так анимация все таки есть или ее нет? Плавно или резко?
Выложите проблемный код в песочницу jsfiddle.net или codepen.io и опишите что должно происходить.

Простецкий вариант на коленке: https://jsfiddle.net/2ck7on4L/

Лучший способ верстки данной структуры?

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

Как сделать такую форму?

Каким образом required влияет на анимацию label?

Лучший способ верстки данной структуры?

Roweb, значит всё равно ставите зеленый внутрь. Ему задаете левый margin auto.
На js считаете его order.

Альтернатива: зеленый блок сам по себе. Вешаете его куда надо абсолютом. На js узнаете его ширину и задаете ее как правый margin для последнего блока в первой строке. Который из них будет последним тоже выясняете на js.
С высотой не знаю что делаете, в условиях задачи опять пропуски, ванговать не буду.

Возможно, гридами. Но опять таки.. знать бы что это и зачем..

Лучший способ верстки данной структуры?

Roweb,

Но мне хотелось

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

Лучший способ верстки данной структуры?

Roweb, float: right
https://jsfiddle.net/vmhgs3nq/
раскрашивайте как вам надо

Лучший способ верстки данной структуры?

Хм.. а ведь еще совсем недавно флоатами делали ВСЁ! А теперь вот никак.

Так вот, для обтекания одного элемента другими отлично подходит float.

Съезжают блоки при уменьшении масштаба?

хочу сделать свой сайт адаптивным

Уменьшать сайт вы уже научились, осталось сделать так, чтобы блоки не съезжали. Именно в этом суть.

Начать нужно с правильного meta viewport. Есть он у вас?
Дальше писать @media условия и в них перестраивать блоки так, как нужно по макету или вашей задумке.

Некорректно работает значение 1fr в свойстве grid-template-columns. В чем причина?

Станислав Зиненко, у меня никто никуда не "вылазит".
Воспроизведите проблему в песочнице.

Некорректно работает значение 1fr в свойстве grid-template-columns. В чем причина?

Выложите неработающий пример с вашими стилями в песочницу jsfiddle.net или codepen.io

Пока предположу, что вы забыли убрать абсолюты у дочерних элементов.

Каким образом required влияет на анимацию label?

:placeholder-shown поддержку смотрите сами.
https://jsfiddle.net/Ankhena/kfgz9rno/

Как внедрить иконку через content?

Можно даже обойтись без fontawesome, а использовать svg
https://html5book.ru/css-content/

Для колонки с товарами нужны картинки одинаковых значений?

Попробуйте прочитать свой вопрос и переписать его заново.

Из того, что я могу предположить:
Блоки .col одинаковой ширины (У вас странной ширины, 6 блоков в сумме дают 96% родительской ширины, правый отступ еще 1%. Остается лишних 3%. Ну да ладно, может вам так нравится).
Чтобы картинки были одинаковой высоты, нужно, чтобы .col были одинаковой высоты. Для этого составляете пропорцию https://jsfiddle.net/Ankhena/cLhxv7eq/
После этого картинкам:
- задаете абсолют и обрезаете через overflow родителя
- используете clip-path
- меняете img на фон

И переходите на флексы.