Рома Зварич

Как изменить этот радиус на css или js, jquery?

Например, обратившись к фигурам кругов, вложенным в элемент с id="myMask"

#myMask circle {
  r: 2;
}

Результат:
https://codepen.io/hisbvdis/pen/mddprBd?editors=1100

можно ли добиться такого адаптива при помощи flexbox

На Flexbox можно этого добиться дублированием нужного блока и отображением одного из них на каждом разрешении экрана.
Пример на Flexbox:
https://codepen.io/hisbvdis/pen/eYYGOQd

Пример на Grid:
https://codepen.io/hisbvdis/pen/ZEEXzgB

Как реализовать такую сетку на grid?

1) Задаёте размер строки в сетке с помощью свойства grid-auto-rows
2) Определённым элементам задаёте свойство grid-row: span 2;, чтобы они занимали две строки

Результат:
https://codepen.io/hisbvdis/pen/KKKWJEX

В Вашем случае, чтобы ничего не считать с помощью JS, лучше вместо Grid использовать CSS Columns.

Просто задаёте количество колонок через column-count: 2; и ничего подсчитывать не нужно.
P.S. Для дочерних элементов еще задать break-inside: avoid;

Результат:
https://codepen.io/hisbvdis/pen/xxxbBNw

Как добиться подобной трансформации?

С помощью свойства transform
1) Устанавливаете перспективу
2) Поворачиваете элемент вкруг оси Y

Результат:
https://codepen.io/hisbvdis/pen/OJLKmrv

блоки внутри .reg не видят ширину в процентах

Во-первых, что значит "блоки внутри .reg"?
Вы задаёте ширину не непосредственным детям элемента .reg, а детям его детей.
В итоге, всё работает.
Вот блок .name input имеет ширину 50% от родителя .name

Но Вы, по всей видимости, хотели изменять ширину .name, а не .name input

Если не нужен IE, можно сделать с помощью чистого CSS.
А именно, с помощью position: sticky;

UPD: вижу, что IE нужен

Результат:
https://codepen.io/hisbvdis/pen/bGbPPJN

1. Почему флекс элементы с разным текстом занимают по ширине именно столько места? https://jsfiddle.net/hkz91s0f/1/

Количество содержимого в элементе влияет на его базовый размер. Чем больше содержимого - тем больше места, выделяемого под элемент

Можно ли при flex-direction: column, сделать высоту опять одинаковой?

Можно. Задайте для элемента с классом inner свойства
flex-grow: 1;
https://jsfiddle.net/hisbvdis/g7pzwdqt/1/

Как сверстать карточку товара без верхнего уголка?

Если не нужен IE и Edge, то через Clip-path.
Если нужен IE и Edge, то как-то так.
Левый нижний и правый верхний уголки не идеальные, но зато решение без усложнений

Результат:
https://codepen.io/hisbvdis/pen/KKPYGeK

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

Задайте для элемента с классом .flex-container свойство justify-content: space-between;

Результат:
https://codepen.io/hisbvdis/pen/OJLGorz

Почему блок на флексах не заполняет пустоту по вертикале?

Потому что для родителя заданы свойства align-items: flex-start; и align-content: flex-start;, что прижимает дочерние элементы к началу блока, не давая заполнять пространство по вертикали.
А из-за разного размера картинок, дочерние блоки занимают разную высоту.

P.S. Выложите более полный фрагмент кода, чтобы показать решение на нём.

Для элемента с классом .content задайте свойство overflow: hidden;

Результат:
https://codepen.io/hisbvdis/pen/dybwZeX

Flexbox + абсолютное позиционирование + псевдоэлементы + выборочное скругление углов для верхней грани блока

Результат:
https://codepen.io/hisbvdis/pen/gOYZLNM

Не знаю почему, но методом исключения заметил, что это свойство не работает из-за наличия следующего правила

html, body {
    overflow-x: hidden;
}

P.S. Если задать его не обоим тегам сразу (HTML и body), а только одному (например, только body), то блок с position:sticky работает корректно


Результат, если это правило закомментировать (всё работает)
https://codepen.io/hisbvdis/pen/BaBvKaa

Регулярно сталкиваюсь с подобными глюками Device Mode в браузере Google Chrome.
Попросите заказчика обновить страницу, нажав F5 или проверять в этом же инструменте браузера Firefox или вообще с реального устройства.

Основная задача ограничить текст в пределах ячейки и поставить в месте его обрезания три точки

1) Элементу с классом .user-card__info задайте свойство overflow: hidden;
2) К дочерним элементам, которые нужно обрезать (в данном случае это элемент .user-card__position и user-card__email, задайте свойства

overflow: hidden;
text-overflow: ellipsis;

Результат:
https://codepen.io/hisbvdis/pen/XWryvaN

Вместо grid-template-rows: 100px; нужно указать для Grid свойство grid-auto-rows: 100px;

Результат:
https://codepen.io/hisbvdis/pen/wvwQYRd?editors=1100

На MDN прямо кричат о том, что это не стандартное свойство и не следует его использовать (ссылка)

Предлагают вместо него использовать свойство "transform"

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

1) Делаете спрайт из двух SVG-элементов
2) Задаёте его фоном для элемента
3) При наведении смещаете

Результат
https://codepen.io/hisbvdis/pen/OJLaRMd

Вроде все условия соблюдены.
Проверяйте
Если чего-то не хватает, пишите.

Результат:
https://codepen.io/hisbvdis/pen/mdbQyxo