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

Question

[Big Wheel]

Есть вот такие, адаптивные карточки. В каждой карточке по шесть элементов (условно, элементов может быть еще больше). Карточек так же может быть произвольное количество.

Каждый элемент карточки должен совпадать по высоте с аналогичными по расположению элементами в других карточках.

Тут подкрадывается 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>

Вопрос. С учетом всех вводных, хотя бы в теории, это можно решить на CSS?

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

Comments

[IvanU7n]

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

[Big Wheel]

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

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

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

[Lynn «Кофеман»]

Забей и оставь JS.

[IvanU7n]

Big Wheel, если количество столбцов динамическое, то грид не сильно поможет с выравниванием по центру
т.е. решение на CSS не полунепробиваемое, а из серии можно извратиться с некоторыми нюансами

[Kataev]

Big Wheel, а нельзя для всех элементов карточки задать фиксированную высоту? Если во всех карточках, этот элемент пустой, то скрывать его для всех карточек, например, так (естественно, что у вас в коде либо каждый элемент имеет свой класс, определяющий его стили, либо вы делаете это через nth-child):

.card-container:not(:has(.card__item:not(:empty))) .card__item {
  display: none
}

для самих карточек, задать фиксированную ширину, далее стандартно для контейнера через flexblox

[Big Wheel]

Kataev,

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

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

[Kataev]

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

[Big Wheel]

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

[Big Wheel]

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

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

[Виктор]

В каждой карточке по шесть элементов

а что мешает задать пропорции этих элементов?

[Big Wheel]

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

[Виктор]

Big Wheel, пропорциональная - не фиксированная, все карточки увеличатся если в одной контента будет больше, просто у них там будет больше пустоты. Что не так?

[Big Wheel]

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

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

[Виктор]

Big Wheel, в каждой карточке одна линия, grid не нужен и aspect-ratio тоже (вобще не пользуюсь), можно сделать flex и через flew-grow, например, указать пропорции.

[imko]

Можно очень грязно настилизовать) Сделать карточку display:contents а сами элемены расположить по общему гриду и стилизовать их фон и паддинги чтоб визуально складывалась карточка (ну или подложки покидать)

Answer 1

[xdevelx]

Если только css, то subgrid + немного магии :has
https://codepen.io/xdevelx/pen/bGJaYVV

P.S. По поводу поддержки браузеров я бы сильно не беспокоился - без поддержки сабгридов верстка не сломается. Вполне себе progressive enhancement. Можно добавить @supports (в примере есть)

Answer 2

[Артём Лукичев]

Не заморачивайтесь так. В вашем случае js и точка

Comments

[Big Wheel]

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

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

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