Арсений Матыцин

Дешево и сердито — так: https://codepen.io/i-am-studio_ru/pen/BaWymoy?edit...
А в целом есть смысл и на абсолютном позиционировании.

Просто и дешево — дублируй элементы и трансформируй. Немного сложнее и чуть адекватнее (наверное) — с использованием SVG, в том числе используя элементы повторно по ID.

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

Более разумно будет не пытаться проводить такую манипуляцию, или захардкодить высоту заголовка в две строки (лучше в одну). Или же прибегнуть к JS, который будет динамически высчитывать размер наибольшего заголовка в строке и соседним выдавать такую же фиксируя её. Вроде есть либа такая.

Минус хардкода размера заголовка в том, что если в ряду будут все в одну строку, то появится необоснованное пространство снизу, а JS при большом числе карточек нагрузит вычислительные мощности устройства.

Еще можно подождать, пока войдет в реализацию subgrid. Но с этим пока сложно.

Либо чисто hover на стилях, либо на JS. Псевдокласс на пункт li распространяются на вложенные в нем списки.

Как вариант решения → debounce.

Изображение просто меньше области, растяни его за счет родителя и задай object-fit:cover, как рекомендуют. Это сохранит пропорции, но обрежет от фото то, что не влазит в зону видимости.

Или прибегни к фоновому цвету. Судя по скрину, особого смысла изображения не несут.

Используя гриды. Для адаптива (резины, если быть точнее) необходимо сделать 4 колонки, где левая и правая будут расчетными (calc) таким образом, чтобы внутренние две соответствовали двум половинам макетной ширины.

1. Не пытаться реализовать это на бордерах. Воспользуйся, например, SVG.
2. Можно завернуть элементы в другие с расчётными размерами за вычетом вылетов и с помощью overflow: hidden обрезать их. Такой себе метод

1. Вешаешь на элемент слушатель, или делегируешь. Слушать надо наведение, т.е. hover\mouseenter.
2. Трекаешь положение мышки.
3. Привязываешь её коры к корам элемента.

1. Уменьшение масштаба — не инструмент дебаггинга.
2. Подвал в общем и целом неплохо бы прибивать к футеру, это типа хороший тон, но в большинстве случаев мало кто это делает, так как контент чаще всего больше минимального размера страницы и сам его прижимает.
3. Предусмотреть такую возможность — хорошо и не так уж много времени занимает.

Для начала неплохо бы освоить базовый функционал портала, а затем сервиса для примеров, например https://codepen.io. А еще дальше — посмотреть, как работают селекторы.

Skeleton loading, как популярное решение. В среднем каждый опытный разработчик имеет при себе какой-то минимальный набор таких плюшек под lazy loading. Я время от времени генерирую на svg элементах.

Продолжай использовать column-count и играйся со свойствами display для элементов, список жрет отступы и переносит их для инлайновых и около того элементов.

Если порядок не критичен, то flex-ы или grid-ы на repeat auto-fill\fit с minmax-ами, в последнем варианте и медиазапросы не потребуются.

В основной директории проекта создай собирающий файл, который будет импортировать зависимости из node_modules и компилить их в конечный билд. Для scss это, например @import 'node_modules/..'. Популярное решение.

https://developer.mozilla.org/ru/docs/Web/CSS/mix-...

Или на js, собирая заранее известно инверсные блоки и сверяя их положение с объектом или высчитывая цвета. В общем тут раздолье мысли.

Нус, во-первых CSS не имеет разделение свойств в виде знака равенства. А вот так height: 100vh;. И это правило будет работать всегда, даже когда контента будет больше. Более того, даже после ресайза. Если у тебя при корректном CSS при ресайзе багует, ищи проблему в коде, а не в размерностях.

И в завершение, для таких блоков, есть смысл указывать min-height, чтобы исключить артефакты, если же все-таки содержимое блока оказывается больше того самого размера экрана.