Рома Зварич

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

Потому что для родителя заданы свойства 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

Как сделать вот такие карточки разного размера?

1) Для всех элементов задаёте размер в половину ширины (за вычетом отступа).
2) Для элементов, которые должны занимать всю ширину, добавляете класс, в котором задаёте размер 100%

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

Регулярно сталкиваюсь с подобными глюками 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

Например, вот так (используя особенности Flexbox)

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

1) Ячейке, которую увеличиваете на несколько столбцов, задаёте, например, какой-то класс.
2) Через класс обращаетесь к ней и убираете у неё рамку

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

Как выполнить фон таким образом?

Можно сделать с помощью двух слоёв свойства background

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

Можно же нарисовать

Результат


Скачать в SVG

Подскажите, пожалуйста, как реализовать вот такое выпадающее меню с подчеркиванием только на первом уровне?

Например, вот так:
https://codepen.io/hisbvdis/pen/xxKaNmb?editors=1100

Можно сделать через два псевдоэлемента с разными фонами.
При наведении на блок, первый становится прозрачным, а второй (который был прозрачным), наоборот становится видимым

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

raulvodov , что значит "не работает before и after" ?

Они присутствуют в разметке. Просто они строчные и на них не действуют свойства width и height

Добавьте для них (псевдоэлементов ::before и ::after) свойство display: block; и размеры применятся, а элементы станут видимыми

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

1) Для родительского блока меню устанавливаете вертикальный режим написания через свойство writing-mode: vertical-lr;, чтобы каждый последующий элемент появлялся под текущим.
2) Разворачиваете блок на 180 градусов, чтобы последовательность дочерних элементов шла снизу вверх.

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

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

В браузерах есть встроенные таблицы стилей (CSS), которые размечают HTML-код даже в том случае, если Вы никакие стили не указывали.

Так вот, для тега <body> применяется свойство margin.

Вы можете обнулить его, указав в стилях правило

body {
    margin: 0;
}