Элементы карточек одинаковой высоты?

Артём Лукичев,
Это отчасти ещё и исследовательский интерес )

Я вот ни разу не подкрадывался к subgrid, а тут подсказали, и реально крутая штука, и задачу удалось решить.

То, что нужно "колдовать" с выравниванием "одиноких" карточек на последней строке... Это сильно проще, чем все заморочки с JS (вычисления, ResizeObserver, разрушение/инициализация на брейкпоинтах, отложенная загрузка изображений и пр. (хотя это тоже интересно было сделать)).

Элементы карточек одинаковой высоты?

Виктор,
Хм. Видимо у нас разное понимание пропорциональности (речь же о `aspect-ratio`?) и то как поведут себя элементы карточек с заданными пропорциями. Если хотите, можете показать пример в песочнице.

Как мне кажется, это вряд ли будет лучшим решением, чем `subgrid`..

Элементы карточек одинаковой высоты?

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

Элементы карточек одинаковой высоты?

IvanU7n,
Ухх. В итоге `subgrid` дал классное решение. За такую чистоту и простоту, можно и договориться с UI, на выравнивание переносящихся на новую строку карточек по левому краю ))) Все остальное из вопроса - данный подход решает на 110%!

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

Элементы карточек одинаковой высоты?

Kataev,
Подстраховался дважды.
1. Для ситуации когда картинки одной высоты (а это практически всегда так) дополнительно добавил опцию, позволяющую отключить рассчет высоты элементов для контейнеров внутри которых размещено изображение.
2. Сначала убеждаюсь, что картинки загружены/видны (если они есть).

Элементы карточек одинаковой высоты?

Kataev,

всех элементов карточки задать фиксированную высоту

Увы, не получится. Карточки адаптивные, соответственно меняют свою ширину, в следствии чего меняется количество строк текста, что не позволяет фиксировать высоту элементов.

Элементы карточек одинаковой высоты?

IvanU7n, не написал в задаче, там еще и карточек может быть произвольное количество, ну и оно же адаптивится (что еще головняка добавляет). У subgrid вроде как бы и норм поддержка, но 86%..

На самом деле я ищу подтверждения, чтобы уже забить и отдаться JS )

Но если есть пуленепробиваемое решение CSS... Придется заморачиваться.

Как средствами CSS/HTML создать сегмент круга, который можно будет залить внутренней тенью?

Антон Антон, очень просто ), бывают специфические задачи, для которых не подходит то или иное решение. Тогда мы ищем альтернативные варианты.

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

@Kentavr16

Здесь скорее всего нужны библиотеки вроде three.js

Скорее не нужны ) Three.js немного для другого предназначена )

Ещё можно канвас или свг

SVG!.. Действительно, если вопрос о векторных кривых. А что есть еще много вариантов для рисования кривых в веб-разработке?)))

Canvas не хранит графику в виде DOM-элементов, и поэтому не так хорошо подходит для решения описанной задачи.

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

Ivan Bogachev

Хорошего нативного и кроссбраузерного решения у нас пока нет.

В итоге пришлось абсолютно позиционировать элементы внутри контейнера : / поверх SVG с `preserveAspectRatio="none"`.
Богомерзко, но задачу решает и пуленепробиваемо..

За метод `getPointAtLength()` большое спасибо! Пойду эксперементировать ).

Почему тормозит анимация при скролинге страницы?

...нужно оптимизировать анимацию с помощью will-change, добавил на все анимационные элементы такое свойство...

Так делать не нужно, злоупотребление will-change может привести к серьёзному замедлению работы приложения.

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

Не ленитесь заходить на MDN. 15 минут на чтение доки, чтобы понять что к чему и как это использовать — спасут вам кучу времени и нервов.

Как правильно разрушить и инициализировать Swiper?

Aetae, `swiper.destroy(false, true)` пробовал, куча головняков вылезает / : Плюс ещё новая версия вышла (10.0.0), где то может быть нестабильна.

Как обычно лёгкий путь нам хорошим не кажется )

Большое спасибо за объяснение и за то, что потратили столько времени.

Как правильно разрушить и инициализировать Swiper?

Aetae, по моей неопытной задумке - эти куски DOM подхватывает другой плагин и работает с ними.

Хм. То есть, хорошей практикой будет сделать два компонента с одинаковым контентом, но разным поведением и скрывать один и показывать другой?

Как правильно разрушить и инициализировать Swiper?

Aetae
v-if немного не то. У меня нет задачи скрыть/показать карусель. Задача именно уничтожить экземпляр, удалить стили, контейнеры. Сам контент должен остаться.

P,S. Никогда не используйте в одном компоненте одновременно setup и methods, вообще никогда. Либо одно либо другое. Это разная парадигма.

Спасибо! Почитаю, разберусь.

Safari iOS игнорирует любые отступы справа от последнего дочернего элемента в блоке с горизонтальным скроллом?

Ankhena, в той части где вы попробовали помочь (за что искреннее спасибо), "псевдо" пробовал. Очень не хотелось бы костылить. Не могли бы вы немного развернуть - в чем логичность такого поведения блоков? Пуленепробиваемого решения нет, и костылить всё же придётся?

О второй части комментария - я не очень понял как это относится к вопросу и как могло бы помочь его решить.
Очевидно же, это пример. Даже комментарий есть, о том, что это стили для визуализации и им отделены стили оформления от стилей относящихся к вопросу. За `counter-reset` (и похвалу? за усидчивость) конечно спасибо. Мне не сложно 4 раза нажать Ctrl+D, копировать строку, чтобы быстро накидать пример.

Поменять z-index у предыдущего элемента?

Константин Гусев
Круто, огромное спасибо!

Метод addEventListener mouseover не работает над слайдами Swiper?

0xD34F огромное спасибо!

Как передать значение из addEventListener в переменную?

Вадим,
пока вы не объяснили - не понимал )

Большое спасибо, объяснение направило в нужное русло, задачу решил!

Как правильно записать в SCSS стили для такой разметки?

Максим Морев, большое спасибо!!

Как правильно записать в SCSS стили для такой разметки?

KukuRuku
Максим Морев
Прошу прощения, некорректно вопрос задал, как используя стилизующий класс родителя, поменять стили для .filling__image, .filling__text?