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

660cfd0e3d588640566677.png

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

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

Тут подкрадывается 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 и вычислений дофига и разрушать класс/не инициализировать класс надо на мобилках, решение проблемы с загрузкой картинок и т. д...).
  • Вопрос задан
  • 1014 просмотров
Решения вопроса 1
develx
@develx Куратор тега CSS
Web developer
Если только css, то subgrid + немного магии :has
https://codepen.io/xdevelx/pen/bGJaYVV

P.S. По поводу поддержки браузеров я бы сильно не беспокоился - без поддержки сабгридов верстка не сломается. Вполне себе progressive enhancement. Можно добавить @supports (в примере есть)
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Не заморачивайтесь так. В вашем случае js и точка
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы