Элементы карточек одинаковой высоты?
Есть вот такие, адаптивные карточки. В каждой карточке по шесть элементов (условно, элементов может быть еще больше). Карточек так же может быть произвольное количество.
Каждый элемент карточки должен совпадать по высоте с аналогичными по расположению элементами в других карточках.
Тут подкрадывается grid layout, но нужно еще и чтобы нижние карточки, выравнивались по центру, сохраняя ширину аналогичную верхним карточкам, по этому flexbox.
При этом нужно сохранить чистую разметку, типа:
<div class="card-container"> <div class="card"> <div class="card__item"></div> <div class="card__item"></div> <div class="card__item"></div> <div class="card__item"></div> <div class="card__item"></div> </div> ... </div> |
<div class="card-container"> <div class="card"> <div class="card__item"></div> <div class="card__item"></div> <div class="card__item"></div> <div class="card__item"></div> <div class="card__item"></div> </div> ... </div>
Вопрос. С учетом всех вводных, хотя бы в теории, это можно решить на CSS?
Или уже плюнуть и решить задачу с помощью JS (в принципе уже решил, просто громоздко получается, и ResizeObserver и вычислений дофига и разрушать класс/не инициализировать класс надо на мобилках, решение проблемы с загрузкой картинок и т. д...).
Дополнительно:
теоретически grid + subgrid + двойное количество столбцов и немного магии для последней строки решают эту задачу
На самом деле я ищу подтверждения, чтобы уже забить и отдаться JS )
Но если есть пуленепробиваемое решение CSS... Придется заморачиваться.
т.е. решение на CSS не полунепробиваемое, а из серии можно извратиться с некоторыми нюансами
.card-container:not(:has(.card__item:not(:empty))) .card__item { display: none } |
.card-container:not(:has(.card__item:not(:empty))) .card__item { display: none }
для самих карточек, задать фиксированную ширину, далее стандартно для контейнера через flexblox
всех элементов карточки задать фиксированную высоту
Увы, не получится. Карточки адаптивные, соответственно меняют свою ширину, в следствии чего меняется количество строк текста, что не позволяет фиксировать высоту элементов.
Подстраховался дважды.
1. Для ситуации когда картинки одной высоты (а это практически всегда так) дополнительно добавил опцию, позволяющую отключить рассчет высоты элементов для контейнеров внутри которых размещено изображение.
2. Сначала убеждаюсь, что картинки загружены/видны (если они есть).
Ухх. В итоге `subgrid` дал классное решение. За такую чистоту и простоту, можно и договориться с UI, на выравнивание переносящихся на новую строку карточек по левому краю ))) Все остальное из вопроса - данный подход решает на 110%!
Можете продублировать коммент в ответы, т. к. это - вполне себе решение.
В каждой карточке по шесть элементов
а что мешает задать пропорции этих элементов?
Произвольное количество контента в этих элементах, которое может не вписаться в пропорциональную высоту.
Хм. Видимо у нас разное понимание пропорциональности (речь же о `aspect-ratio`?) и то как поведут себя элементы карточек с заданными пропорциями. Если хотите, можете показать пример в песочнице.
Как мне кажется, это вряд ли будет лучшим решением, чем `subgrid`..
Если только css, то subgrid + немного магии :has
https://codepen.io/xdevelx/pen/bGJaYVV
snippet
P.S. По поводу поддержки браузеров я бы сильно не беспокоился - без поддержки сабгридов верстка не сломается. Вполне себе progressive enhancement. Можно добавить @supports (в примере есть)
Ответы:
Не заморачивайтесь так. В вашем случае js и точка
- Артём Лукичев,
Это отчасти ещё и исследовательский интерес )Я вот ни разу не подкрадывался к subgrid, а тут подсказали, и реально крутая штука, и задачу удалось решить.
То, что нужно "колдовать" с выравниванием "одиноких" карточек на последней строке... Это сильно проще, чем все заморочки с JS (вычисления, ResizeObserver, разрушение/инициализация на брейкпоинтах, отложенная загрузка изображений и пр. (хотя это тоже интересно было сделать)).
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать элементы карточек одинаковой высоты, можно использовать CSS свойство flexbox.
Прежде всего, убедитесь, что у ваших карточек есть общий контейнер, в котором они находятся. Затем добавьте следующие стили к этому контейнеру:
.card-container { display: flex; }
Это свойство flexbox позволит элементам внутри контейнера автоматически растягиваться на одинаковую высоту. Однако, если ваши карточки содержат различное количество контента и вы хотите, чтобы текст не обрезался, вы можете использовать свойство align-items:
.card-container { display: flex; align-items: stretch; }
Теперь все элементы карточек будут иметь одинаковую высоту, независимо от их содержимого. Не забывайте также настроить другие стили ваших карточек, чтобы они выглядели красиво и профессионально.